0

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

1 に答える 1

1

今朝、別のコンプと別のブラウザで見たところ、問題が見つかりました。問題は、親が 100% であることです。代わりに SET PIXEL 幅が必要です。以下の例を参照してください。

jsフィドル

脚本

/*  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);
    });
});
于 2012-12-10T14:38:37.107 に答える