0

このマークアップを 3 つの正方形で作成しました。いずれかの四角形にカーソルを合わせると、中央の水平バーが 2 つのアニメーションを実行します。

  1. 余白をアニメーション化する
  2. 高さをアニメートする

私はチュートリアル [http://css-tricks.com/full-jquery-animations/][1] に従いましたが、2 つのアニメーションがあるため、マウスがホバーしてキューが建てる。再現するには、マウスを 3 つのセルで激しく動かしてみてください。

ここで私の JS Fiddle を参照してください: [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" }); 
});
4

2 に答える 2

0

キューにアニメーションを配置しないと、キューが構築されなくなります。

$(".home-feature-text", this).animate({ height: "62px" }, { queue: false });
于 2013-05-16T15:18:19.080 に答える
0

何方をお探しですか：

  $(".home-feature-text", this).stop(true).animate({ height: "62px", marginTop: "-182px"});
于 2013-05-16T15:21:20.497 に答える