动画另一个元素内的多个元素 [英] Animating multiple elements inside another element

问题描述

所以我有容器，里面有5个div的yui库.这个div是菜单.所以我想做的是，当我将鼠标移到div上方时，只有该动画会向上移动，而当我将鼠标移到其他位置时，它将向下动画.我的js代码同时为所有元素设置动画.

So I have container and inside there is yui library with 5 divs. This divs are menus. So what i want to do is that when I move mouse over div only this one will animate UP and when I move mouse somewhere else it will animate DOWN. My js code animate all elements at same time.

<div class="container">
<div class='yui3-g-r'>

    <div class="yui3-u-1-5">
        <div class="kvadrat">
            <span class="title"><a>Smeri</a></span><br/>
            <span class="description">
                <ul class="blabla">
                 <li><a class="link" href="smeri/racunalnistvo_prva/index.html" >Računalništvo</a></li>
                 <li><a class="link">Strojništvo</a></li>
                </ul>
            </span>
        </div>
    </div>

    <div class="yui3-u-1-5">
        <div class="kvadrat">
            <span class="title"><a>Galerija</a></span><br/>
            <span class="description">
                <ul class="blabla">
                    <li><a class="link" href="galerija/predstavitev poklicev-nak. center/osnova/index.html">Slike</a></li>
                </ul>
            </span>
        </div>
    </div>

我的jQuery代码是这样的:

And my jQuery code is this :

$(".description" ).hide();

$('div.kvadrat').hover(
     function () {
       $(".description" ).slideDown( "slow" );
     }, 
     function () {
        $(".description" ).slideUp( "slow" );
     }
 );

推荐答案

$(".description" ).hide();

$('div.kvadrat').hover(
     function () {
       $(this).find(".description" ).slideDown( "slow" );
     }, 
     function () {
        $(this).find(".description" ).slideUp( "slow" );
     }
 );

这篇关于动画另一个元素内的多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！