<body> <button id="button1">Нажать</button> <br/> <img class="el" width="280" height="256" src="images/4.jpg"> <style> div { position: absolute; background-color: #abc; left: 50px; width: 90px; height: 90px; margin: 5px; } </style> <div class="el"></div> <script> $('#button1').click(function () { $('.el').animate({ bottom: '+=50px' }, 'slow') }); </script>

  • 2
    Judging by the code, the reason is that you assigned the div position: absolute; and not .el - Yuri

2 answers 2

Place the image inside the div

 $('#button1').click(function () { $('.el').animate({ bottom: '+=50px' }, 'slow') }); 
 div { position: absolute; background-color: #abc; left: 50px; width: 90px; height: 90px; margin: 5px; } 
 <button id="button1">Нажать</button> <div class="el"> <img width="280" height="256" src="images/4.jpg"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

     $('#button1').click(function () { $('.el').animate({ bottom: '+=50px' }, 'slow'); }); 
     /* Для Блока */ div.el { position: absolute; background-color: #abc; left: 50px; width: 90px; height: 90px; margin: 5px; } /* Для картинки */ img.el { position: absolute; left: 150px; width: 90px; height: 90px; margin: 5px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button1">Нажать</button> <br/> <img class="el" width="280" height="256" src="https://www.gravatar.com/avatar/517406a65cad01c8c9a54ebb3a8b35cd?s=48&d=identicon&r=PG"> <div class="el"></div>