jQuery Animate - animiert kein absolutes DIV

Wissen Sie, warum ich ein absolut positionierendes div mit jQuery nicht animieren kann?jQuery Animate - animiert kein absolutes DIV

Show bitte hier (hier ist mein Beispiel):

http://jsfiddle.net/2VJe8/

HTML:

<html> 
<body> 
    <div class="test"> 
     <div class="box"> 
      <div class="arrow"></div> 
     </div> 
     <a href="#" class="btnStartAni">Animate</a> 
    </div> 
</body>

CSS:

.test { margin: 0; padding: 0;} 
.test .box { width: 150px; height: 140px; background-color: red; position: relative; } 
.test .box .arrow { width: 50px; height: 50px; background-color: black; position: 
absolute; bottom: 0; right: -50px;}

JavaScript:

jQuery(".test a.btnStartAni").on("click", function(e){ 
    e.preventDefault(); 
    jQuery(".box").animate({ width: 400}, 800); 
});

die Blackbox ist während der Animation ausblenden! Aber ich weiß nicht warum?

können Sie mir bitte helfen?

Quelle

2012-12-15 mal200

jQuery fügt 'Überlauf: hidden' während der Animation. Nicht sicher warum. –

jQuery bewirkt, dass der Überlauf versteckt werden, wenn Sie .animate verwenden, so dass Sie den Code ändern zu

jQuery(".test a.btnStartAni").on("click", function(e){ 
    e.preventDefault(); 
    jQuery(".box").animate({ width: 400}, 800).css('overflow', 'visible'); 
});

Und es sollte

JsFiddle arbeiten: http://jsfiddle.net/2VJe8/1/

Quelle: jQuery .animate() forces style "overflow:hidden"

Quelle

2012-12-15 15:23:41 extramaster

Eine alternative (bevorzugte) Lösung besteht darin, 'overflow: visible! Important;' zu '.box' im CSS zu setzen. – mekwall

overflow: hidden wird auf .box gesetzt, wenn jQuery die Box animiert. .arrow Überläufe von .box und so verschwindet. Überlegen Sie, das Markup zu ändern.

Quelle

2012-12-15 15:23:25 onions

Sie können die Elemente auch neu anordnen, um den gleichen Effekt zu erhalten (mit float:left und display:inline-block)

http://jsfiddle.net/mkVrL/

Quelle

2012-12-15 15:35:05

jQuery Animate - animiert kein absolutes DIV

Antwort

Verwandte Themen