Question

我用3个方块构建了这个标记。在悬停任何方块时，中间水平条将执行2个动画：

设置边距动画
动画高度

我已经按照教程[http://css-tricks.com/full-jquery-animations/] [1]但是因为有两个动画似乎与其他动画冲突一旦鼠标悬停并允许要构建的队列。要重现，请尝试在3个细胞上猛烈移动鼠标。

在这里查看我的JS小提琴：[http://jsfiddle.net/xtTcv/] [2]

HTML：

<div id="home-feature-wrapper">
    <div class="home-feature">
        <img src="/5e7uj.jpg" alt="aerobed feature" />
        <div class="home-feature-text">
            <a href="#"><span class="feature-text-top">CHECKOUT</span><br />
                <span class="feature-text-bottom">OUR SPECIALS</span> 
            </a>
        <div class="home-feature-details">                
            <p>Don't miss out on items specially discounted for our web store!</p>
            <a href="#" class="button">CLICK HERE</a>
        </div>
    </div>
</div>
<div class="home-feature">
    <img src="5e7uj.jpg" alt="aerobed feature" />
    <div class="home-feature-text">
        <a href="#"><span class="feature-text-top">SIGN UP</span><br />
            <span class="feature-text-bottom">FOR SAVINGS</span> 
        </a>
        <div class="home-feature-details">
            [[ConLib:SubscribeToEmailList Caption="Subscribe To Email List" EmailListId="1"]]
            <p>Sign up to receive the lastest news on special coupon codes, discounts, and other money-saving deals!</p>
        </div>
    </div>
</div>
<div class="home-feature">
    <img src="5e7uj.jpg" alt="aerobed feature" />
    <div class="home-feature-text">
        <a href="#"><span class="feature-text-top">TOP SELLER</span><br />
            <span class="feature-text-bottom">PREMIUM COMFORT</span> 
        </a>
        <div class="home-feature-details">                
            <p>Shop our most popular items and see what everyone is talking about!</p>
            <a href="#" class="button">CLICK HERE</a>
        </div>
    </div>
</div>
</div>

CSS：

#home-feature-wrapper {
background: none repeat scroll 0 0 #FFFFFF;
height: 280px;
margin: 400px auto -30px;
overflow: hidden;
padding-right: 5px;
width: 972px;
z-index: 1;
}
#home-feature-wrapper img {
margin: 10px 5px 10px 0;
}
#home-feature-wrapper img:first-child {
margin-left: 10px;
}
#home-feature-wrapper .home-feature {
float: left;
height: 272px;
overflow: hidden;
}
#home-feature-wrapper .home-feature-text {
background: url("http://css-tricks.com/wp-content/csstricks-uploads/transpBlue75.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
height: 62px;
margin-left: 10px;
margin-top: -182px;
overflow: hidden;
padding-top: 18px;
position: relative;
text-align: center;
width: 309px;
}
#home-feature-wrapper .home-feature-text a {
color: #FFFFFF;
}
#home-feature-wrapper .home-feature-text .feature-text-top {
font-size: 20px;
}
#home-feature-wrapper .home-feature-text .home-feature-details {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
margin: 30px 20px 20px;
padding: 10px;
}
#home-feature-wrapper .home-feature-text .home-feature-details .widget div.innerSection div.header h2 {
font-size: 10px;
}
#home-feature-wrapper .home-feature-text .home-feature-details .widget div.innerSection .compactleft tbody tr th label#ctl00_ctl00_NestedMaster_PageContent_ctl00_UserEmailLabel {
display: none;
}

jQuery的：

$(".home-feature").hover(function () { 
    $(".home-feature-text", this).filter(':not(:animated)').animate({ marginTop: "-272px" });
    $(".home-feature-text", this).animate({ height: "244px" }); 
}, function () { 
    $(".home-feature-text", this).animate({ marginTop: "-182px" }); 
    $(".home-feature-text", this).animate({ height: "62px" }); 
});

Answer 1

不将动画放在队列上会阻止队列的建立：

$(".home-feature-text", this).animate({ height: "62px" }, { queue: false });

Answer 2

您在寻找：

  $(".home-feature-text", this).stop(true).animate({ height: "62px", marginTop: "-182px"});

Jquery Hover动画排队

2 个答案: