使用jQuery在悬停时将div宽度从50%更改为70%

Question

我有两个div,每个都有50%的宽度.我想做到这一点,以便悬停的div扩大到70%,另一个减少到30%.当鼠标移出时,它们各自返回50%.我写了一个脚本,但它没有给出正确的结果.宽度是流动的,因此需要调整到所有窗口大小.我怎么能让这项工作正确？

由于鼠标悬停功能无法正常运行,我还没有编写mouseout功能.

现在它是如何工作的:http: //jsfiddle.net/kYZyp/

这是我的代码:

<div id="left" class="content_left"></div>
<div id="right" class="content_right"></div>

这是我的div的css

.content_left {
    width:50%;
    top:0px;
    left:0px;
    bottom:0px;
    background:url(wedding.jpg) left center no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

.content_right {
    width:50%;
    top:0px;
    right:0px;
    bottom:0px;
    background:url(events.jpg) right center no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

我正在使用这个脚本:

<script>
$("#left").mouseover(function(){
  $("#left").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#right").animate({
    width: "30%"
  }, 1500 );
});

$("#right").mouseover(function(){
  $("#right").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#left").animate({
    width: "30%"
  }, 1500 );
});

</script>

并包括这个jQuery文件:

<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

Answer 1

不知道这是否适合您:http://jsfiddle.net/yCY9y/3/

DOM:

<div id="wrapper">
    <div id="left" class="content_left">LEFT</div><div id="right" class="content_right">RIGHT</div>
</div>

我使用包装器确保我们永远不会破坏下一行.

CSS:

#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}
#left, #right {
    display:inline-block;
    width: 50%;
}
#left {
    background:red;
}
#right {
    background:yellow;
}

我用了 #wrapper

white-space:nowrap; // Newer break whitespaces (break to the next line)

和

width:100%;

在#left, #right我们使用:

display:inline-block;

女巫首先兼容> IE6.(希望这不是问题).

JS:

$("#left, #right").each(function() {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #right").hover(function() {
    $(this).animate({
        width: "70%"
    }, 300 );
    $(this).parent().children().not(this).animate({
        width: "30%"
    }, 300 );
}, function() {
    $(this).parent().children().each(function() {
        $(this).animate({
            width: $(this).data("standardWidth")
        }, 300 );
    });
});

首先,我结合相同的mouseover,并mouseout在这两个事件#right和#left

$(selector).hover(mouseOverHandler, mouseOutHandler);

...

$(this).parent().children().not(this)

我们将事件触发的元素抛出并查找所有它的parent(#wrapper)childNodes:$(this).parent().children()现在我们this使用jQuery的not方法过滤掉所有匹配的东西.(this= #leftOR #right)女巫是元素.现在我们有#right -> #left和#left -> #right.

将mouseOutHandler所有#wrapperchildNodes的宽度重置为50%

希望这能以正确的方式引导你......

编辑:

如果您要将动画到期链接/排队使用,可以使用该stop方法停止所有活动动画并清除队列:

$(selector).stop().animate({
    ....
})