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

Question

我有两个 div，每个宽度为 50%。我想让悬停的 div 扩大到 70%，另一个缩小到 30%。当鼠标移出时，它们都会恢复到 50%。我写了一个脚本，但它没有给出正确的结果。宽度是可变的，因此它们需要调整以适应所有窗口尺寸。我怎样才能让这项工作正常进行？

我还没有编写 mouseout 函数，因为 mouseover 无法正常工作。

现在的运作方式如下： 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;

witch 首先兼容 >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 );
    });
});

首先我在#right和#left上绑定相同的mouseover和mouseout事件

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

...

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

我们获取事件被触发的元素 throw 并找到它的所有父节点 (#wrapper) childNodes: $(this).parent().children() 现在我们过滤掉所有内容匹配 this 使用jQuery 的 not 方法。 (this = #left OR #right) 女巫是元素。现在我们有了#right -> #left 和 #left -> #正确。

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

希望这会引导您找到正确的方法...

编辑：

如果您的动画链接/排队使用可以使用 stop 方法停止所有活动动画并清除队列：

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

Answer 2

这应该很适合您：

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
               $(this).css("width", "70%"); 
            },
            function(){
                $(this).css("width", "50%");
            }
        );                             
    });
</script>

编辑：添加动画
编辑：为动画添加了高度调整

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
                $(this).animate({ "width" : "70%", "height" : $("#container").height() + "px" }); 
            },
            function(){
                $(this).animate({ "width" : "50%", "height" : "" });
            }
        );                             
    });
</script>
<div id="container" style="height:400px;border:1px solid #000;padding:10px;">
    <div id="div1" style="width:50%;border:1px solid #000;min-height:100px;">
        Hello world!
    </div>
</div>

编辑：如果您希望它填充窗口的高度，只需使用 window.innerHeight 代替容器高度：

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
                $(this).animate({ "width" : "70%", "height" : window.innerHeight + "px" }); 
            },
            function(){
                $(this).animate({ "width" : "50%", "height" : "" });
            }
        );                             
    });
</script>
<div id="div1" style="width:50%;border:1px solid #000;min-height:100px;">
    Hello world!
</div>

这是一个 jsFiddle 演示了它的工作原理。

Answer 3

采取@James ' 回答 (+1) 并添加动画，只需使用 .animate()：

$(function(){
    $("#div1").hover(
        function(){
           $(this).animate({width: '70%'});
        },
        function(){
            $(this).animate({width: '50%'});
        }
    );                            
});

演示：http:// jsfiddle.net/mattball/sAW2c/