jQuery는 동시에 더 크고 작은 애니메이션을 적용합니다.

Question

div 위로 마우스를 가져 가면 끌기가 더 커지고 다른 하나는 더 작게 만듭니다. 그들은 50 %와 50 %입니다. 마우스를 가져 가면 화면이 1 초 동안 작아지고 깜박 거리는 내용이 표시됩니다. 내가 지금 한 것은 29.5 %로 작은 div로 설정되었습니다. 불행히도 이것은 좋은 해결책이 아닙니다. 가능한 경우 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); 
    }); 
});