Форум программистов [Powered by Invision Power Board]

Код


<script type="text/javascript">
            $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'354px'},1000);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);                        
                        $this.stop().animate({'width':'73px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });
        </script>

Код


<ul class="accordion" id="accordion">
                <li class="bg4">

                    <div class="heading"><div><img src="images/p18.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                    

                        <h2><img src="images/gastro.png" />гастроэнтерология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                <li class="bg5">

                    <div class="heading"><div><img src="images/p17.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/urolog.png" />урология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>

                </li>



                <li class="bg7">

                    <div class="heading"><div><img src="images/p16.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/onkolog.png" />онкология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                <li class="bg8" id="one">

                    <div class="heading"><div><img src="images/p15.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/kardiolog.png" />кардиология и ангиология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>

                </li>

                                <li class="bg6">

                    <div class="heading"><div><img src="images/p14.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/dermayolog.png" />дерматология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                  <li class="bg2">

                    <div class="heading"><div><img src="images/p13.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/ginekolog.png" />гинекология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                

                 <li class="bg3">

                    <div class="heading"><div><img src="images/p12.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/orto.png" />ортопедия</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                

                <li class="bg1">

                    <div class="heading">

                    <div><img src="images/p11.png" /></div>

                    </div>

                    <div class="bgDescription"></div>                    

                    <div class="description">

                        <h2><img src="images/plastic.png" />пластическая хирургия</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>

                </li>

            </ul>