jsFiddle

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);
    });
});

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

1 个答案:

jsFiddle