CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
erezT
erezT

Reputation: 186

Jquery animate.({opacity} not running at all

So in my code I am trying to animate an opacity of a div, when that didn't work, I selected the img with chrome, but still, animation doesn't run, I went over the code but maybe i'm missing something.

The HTML simplified:

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

The script:

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

and this is the css:

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

So the console does print 'starting anim', but the animation doesn't reach the callback so it doesn't print completion in console.

Can someone spot the issue, would a previous script running could be the culprit?

Upvotes: 2

Views: 2376

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115212

There is simple typo in your selector a misplaced . before body, so change .body to body. Also put code inside document ready handler to wait for the page to load.

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

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

body is html tag but you are using it as class in your code. Remove . before it in jQuery code and your animation will work.

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>

Upvotes: 0

Rudi
Rudi

Reputation: 2995

Instead of jQuery animate, you could add a css class to the image on load, and use css for the animation:

JS

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

CSS

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

Upvotes: 1

Related Questions