jQuery-单击动画元素

Question

I am trying to create something where you hover over the boxes and 'tabs' slide out which you should be able to click.

However, I can't seem to work out how I can keep the red box extended when hovering over it so I can click the red tab and as you mouse off the red tab the animation goes back.

Here is what I have got so far: http://jsfiddle.net/gLsWw/1/

<div class="box">
    <a class="slide"></a>
</div>

<div class="box">
    <a class="slide"></a>
</div>

$(".box").hover(function() {
    $(".slide").stop(true, false).animate({ width: "200px" });
}, function() {
    $(".slide").stop(true, false).animate({ width: "auto" });
}); 

.box {
    width: 65px;
    height: 65px;
    background-color: green;
    border: 1px blue solid;
}

.slide {
    position: absolute;
    width: 65px;
    height: 65px;
    background-color: red;
    z-index: -1;
}

Thanks in advanced.

Answer 1

I believe I have it working how you want: http://jsfiddle.net/594Yk/

$(".box").hover(function() {
    $(this).find(".slide").animate({ width: "200px" });
}); 

$(".box").mouseout(function() {
    $(this).find(".slide").animate({ width: "65px" }); 
});

Answer 2

The main problem is that .slide has a negative z-index. You would need to set this up without the negative z-index in order for it to work properly. Here is the updated CSS:

.box {
    width: 65px;
    height: 65px;
    background-color: green;
    border: 1px blue solid;
    position: relative;
}

.slide {
    position: absolute;
    width: 0;
    height: 65px;
    background-color: red;
    left: 66px;
}

Along with that, I assume that you only want one red element to slide out at a time, not both. Here's the updated JS:

$(".box").hover(function() {
    $(this).find(".slide").stop().animate({ width: 200 });
}, function() {
    $(this).find(".slide").stop().animate({ width: 0 });
}); 

I changed the following in the JS:

• Added .stop() to the animations to cancel any existing animations.
• Changed the hidden width to 0 so that it will animate.
• Selectors are now wrapped in a .find call to limit it to the current element.

Updated JSFiddle: http://jsfiddle.net/gLsWw/28/

---

Alternatively, you could do this entirely with CSS:

.box {
    width: 65px;
    height: 65px;
    background-color: green;
    border: 1px blue solid;
    position: relative;
}

.slide {
    position: absolute;
    width: 0;
    height: 65px;
    background-color: red;
    left: 66px;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}

.box:hover .slide {
    width: 200px;
}

JSFiddle: http://jsfiddle.net/gLsWw/30/

Answer 3

One solution is that you could have a container element that Holds both the box and the sliding tab.

Something like...

<div class="boxContainer">
    <div class="box">
        <a class="slide"></a>
    </div>
</div>

$(".boxContainer").hover(function() {
    $(".slide").stop(true, false).animate({ width: "200px" });
}, function() {
    $(".slide").stop(true, false).animate({ width: "auto" });
}); 

http://jsfiddle.net/pTU2d/