JQuery Анимация

Question

Я играю с Jquery .animate и пытаюсь сделать некоторые базовые анимации изображения, когда я растягиваю изображение при наведении мыши.Тем не менее, у меня есть 4 изображения, и в настоящее время каждый раз, когда расширяется, это влияет на другие изображения.Как сделать их независимыми друг от друга?

  <div class="logos"> 
     <img align="top" id="imgBuffalo" src="../../../../Content/Images/buffalo.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top" id="imgIndianapolis" src="../../../../Content/Images/indianapolis.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top" id="imgMiami" src="../../../../Content/Images/miami.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top"  id="imgNYJets" src="../../../../Content/Images/nyjets.png" width="80" height="60" /> 
  </div> 


 $(document).ready(function () { 

        $("#imgBuffalo").mouseover(function () { 
            $("#imgBuffalo").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgBuffalo").mouseleave(function () { 
            $("#imgBuffalo").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgIndianapolis").mouseover(function () { 
            $("#imgIndianapolis").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgIndianapolis").mouseleave(function () { 
            $("#imgIndianapolis").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgMiami").mouseover(function () { 
            $("#imgMiami").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgMiami").mouseleave(function () { 
            $("#imgMiami").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgNYJets").mouseover(function () { 
            $("#imgNYJets").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgNYJets").mouseleave(function () { 
            $("#imgNYJets").animate({ width: "80px", height: "60px" }, 500); 
        });

Answer 1

Использование метода animate эффективно изменяет CSS элементов, на которые он воздействует.Поскольку ваши изображения просто расположены друг над другом, изменение размеров одного из них обязательно повлияет на другие.

Вы можете попробовать поиграть с position: relative или position: absolute, чтобы изображения не перемещались, когда ихРазмеры меняются, но вы получите противоречивые результаты в разных браузерах.

Если вы ищете эффект всплывающего типа расширения, я бы предложил создать новый div и затем клонировать изображение в него.,Затем вы можете делать все, что захотите, с плавающим div / изображением, не влияя на других.

На основе используемой в данный момент анимации создается впечатление, что вы пытаетесь добиться чего-то похожегоанимации док-станции Apple.Уже доступно несколько плагинов jquery , которые вы могли бы использовать вместо ручного кодирования анимаций напрямую.

Answer 2

Лучше всего разместить логотипы абсолютно на экране. Это будет держать их в конфликте друг с другом. Дайте каждому img класс «логотип» или что-то в этом роде.

.logo { position : 'absolute'; }

Затем разместите каждый логотип на основе его идентификатора.

Далее, я бы предложил использовать .hover () вместо mouseover и mouseleave. Это дает вам возможность установить два обработчика событий в меньшем количестве кода.

$('.logo').hover(function() {
     $(this).animate({ width: "90px", height: "70px", top : "5 less px than set in css", left : "5 less than set in css" }, 500); 
}, function() {
     $(this).animate({ width: "80px", height: "60px", top : "Reset to css", left : "reset to css" }, 500); 
}

Читайте на http://api.jquery.com/hover/ для более подробной информации.

Вы на правильном пути к изучению некоторых интересных эффектов в jQuery. Так держать!

Answer 3

Вы имеете в виду, что другие изображения перемещаются по мере расширения одного изображения?Если вы не хотите, чтобы они влияли друг на друга, вам придется поместить каждое изображение в абсолютный div и изменить z-индекс элемента div, содержащего активную анимацию, на верхнюю.