jQueryのアニメーション。（{不透明度が}だから私のコードでは、私はそれが動作しませんでしたdiv要素の不透明度をアニメーション化しようとしていますすべての

Question

で動作していない、私はクロームでimgを選択したが、それでも、アニメーションはしていません私は、コードの上に行ってきましたが、たぶん私は何かが欠けてる、実行

HTMLを簡素化：。

<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> 

をスクリプト：

<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> 

、これはCSSです：

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

ので、コンソールは、印刷「スタートアニメーション」を行いますが、それはコンソールに完了を印刷しないようにアニメーションがコールバックに到達していません。

誰かが問題を見つけることができ、以前のスクリプトの実行が犯人かもしれないでしょうか？

Answer 1

あなたのセレクタには、の前に間違って配置された.がありますので、.bodyをbodyに変更してください。また、document ready handlerの中にコードを入れて、ページが読み込まれるのを待ちます。

$(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

の代わりにjQueryを使用すると、負荷上の画像にCSSクラスを追加し、アニメーションのためのCSSを使用することができ、アニメーション：

JS

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

CSS

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

Answer 3

bodyは、HTMLタグのですが、あなたのコード内でクラスとしてそれを使用しています。 jQueryのコードで前.を削除し、あなたのアニメーションが動作します。

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>