Jquery animate. ({Opacity} läuft überhaupt nicht

Question

Also in meinem Code versuche ich eine Deckkraft eines Div zu animieren, wenn das nicht funktioniert habe, wählte ich die img mit Chrom, aber immer noch, Animation nicht laufen, ich über den Code ging aber vielleicht etwas, was ich bin fehlt

die HTML vereinfacht.

<div class="searchWrapper"> 
    <div class="row"> 
     <div class="col-xs-3 popsImage"> 
      <img src="img/airplane3.png"> 
     </div> 
    </div> 
    <script src="https://www.somesite.com/searchbox"></script> 
</div> 

Das Skript:

<script type="text/javascript"> 
     console.log('starting anim'); 
     $(".body > div.searchWrapper > div.row > div > img").animate({ 
      opacity: 0.9 
     }, 5000, function() { 
      console.log('Animation complete.'); 
     }); 
    </script> 

und dies ist die CSS:

body > div.searchWrapper > div.row > div > img{ 
    opacity:0; 
} 

So ist die Konsole funktioniert print 'Start anim', aber die Animation nicht den Rückruf erreichen, damit es nicht fertig gestellt Konsole kann nicht gedruckt werden.

Kann jemand das Problem erkennen, würde ein vorheriges Skript ausgeführt werden könnte der Schuldige sein?

Answer 1

Es ist einfacher Tippfehler in Ihrem Selektor ein verlegtes . vor body, so .body-body ändern. Setzen Sie auch den Code innerhalb von document ready handler, um darauf zu warten, dass die Seite geladen wird.

$(document).ready(function() { 
 
    console.log('starting anim'); 
 
    $("body > div.searchWrapper > div.row > div > img").animate({ 
 
    //-^------------ remove . 
 
    opacity: 0.9 
 
    }, 5000, function() { 
 
    console.log('Animation complete.'); 
 
    }); 
 
});

body > div.searchWrapper > div.row > div > img { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="searchWrapper"> 
 
    <div class="row"> 
 
    <div class="col-xs-3 popsImage"> 
 
     <img src="img/airplane3.png"> 
 
    </div> 
 
    </div> 
 
    <script src="https://www.somesite.com/searchbox"></script> 
 
</div>

Answer 2

Statt jQuery animieren Sie eine CSS-Klasse auf das Bild auf Belastung entstehen, kann und für die Animation mit CSS:

JS

$('element').addClass('animate-opacity'); 

CSS

.animate-opacity { 
    transition: opacity 5s; 
    opacity: .9; 
} 

Answer 3

body ist HTML-Tag, aber Sie verwenden es als Klasse in Ihrem Code. Entfernen Sie . vorher in jQuery-Code und Ihre Animation wird funktionieren.

console.log('starting anim'); 
 
$("body > div.searchWrapper > div.row > div > img").animate({ 
 
    opacity: 0.9 
 
}, 5000, function() { 
 
    console.log('Animation complete.'); 
 
});

body > div.searchWrapper > div.row > div > img{ 
 
    opacity:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="searchWrapper"> 
 
    <div class="row"> 
 
     <div class="col-xs-3 popsImage"> 
 
      <img src="img/airplane3.png"> 
 
     </div> 
 
    </div> 
 
    <script src="https://www.somesite.com/searchbox"></script> 
 
</div>