jquery - jQuery 动画宽度同时变大和变小

Question

我想将鼠标悬停在一个 div 上并使悬停的一个更大而另一个更小。它们是 50% 和 50%。悬停时发生的情况是屏幕小了一秒钟，您会看到下面的内容闪烁。我现在所做的是在悬停时将小 div 设置为 29.5%。不幸的是，这对我来说不是一个好的解决方案。如果可能的话，我想使用 70% 和 30%。

html

<div id="slider">
    <div id="slideLeft">
        <p>Left</p>
    </div>
    <div id="slideRight">
        <p>Right</p>
    </div>
</div>

css

#slider{width:100%;min-height:450px;background-color:#999;}
#slideLeft{width:50%;float:left;background-color:#333;height:450px;}
#slideRight{width:50%;float:left;height:450px;background-color:#666;}

js

$('#slideLeft').mouseenter(function(){
        $("#slideRight").animate({
           width: '30%'
        }, { duration: 200, queue: false });
        $("#slideLeft").animate({
           width: '70%'
        }, { duration: 200, queue: false });
    });
});

Answer 1

今天早上在不同的电脑和不同的浏览器上查看后，我发现了问题。问题是父母是 100%；它需要有一个 SET PIXEL 宽度。请看下面的例子：

jsFiddle

脚本

/*  This is simply the same as the document.onLoad func  */
$(function() {
    /*  Grab each element to be animated by a class name  */
    $(".sliders").mouseenter(function() {
        /*  Using .stop helps ensure a smoother animation (no lag backs)  */
        $(this).siblings(".sliders").stop().animate({ width: "30%" }, { duration: 200, queue: false });
        $(this).stop().animate({ width: "70%" }, { duration: 200, queue: false });
    });

    /* with the animation ready (tho you could start your ready func with this,
       set parent slider width on load to be pixals instead of 100 percent  */
    $("#Slider").width($("#Slider").width());
    /*  jQuery reutrns .width as pixels and sets integers as pixels,
        thus the simpl design here will take was initialized by 100% and turn into pixels  */

    /*  And just incase you need to maintain the size on browser window resizing:  */
    $(window).on("resize", function(e) {
        $("#Slider").width("100%");  /* The following line ensures you're set back to pixels
                                        and should elliminate all "flashes"  */
        setTimeout(function() { $("#Slider").width($("#Slider").width()); }, 100);
    });
});