Страницы

Поиск по вопросам

среда, 27 февраля 2019 г.

Применить функцию ко всем дивам в блоке

Сразу скажу чтобы в дальнейшем не было вопросов. Вроде "А что так уже не делают?!, разве нельзя просто сделать вот так?! и т.д". В js я полный нуб. И естественно сформировать свой вопрос я не могу(Так сам бы нагуглил)
В чем весь сабж. Есть код
$(document).ready(function() { var margin = $("#image1").width() / 2; var width = $("#image1").width(); var height = $("#image1").height(); $("#image2").stop().css({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' }); $("#reflection2").stop().css({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px' }); $("#image1").mouseover(function() { $(this).stop().animate({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' }, { duration: 500 }); window.setTimeout(function() { $("#image2").stop().animate({ width: '' + width + 'px', height: '' + height + 'px', marginLeft: '0px', opacity: '1' }, { duration: 500 }); }, 500); }); $("#image2").mouseout(function() { $(this).stop().animate({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' }, { duration: 500 }); window.setTimeout(function() { $("#image1").stop().animate({ width: '' + width + 'px', height: '' + height + 'px', marginLeft: '0px', opacity: '1' }, { duration: 500 }); }, 500); }); });


Сейчас все эффекты применяются только к первому диву vizitka(ко внутренним изображениям). А таких дивов на странице несколько. Как сделать, что бы функция применялась к каждому image1,image2 Которые лежат в vizitka. Я думаю нужно id поменять на класс...НО нужно что-то еще. Все мои попытки оказались тщетными(


Ответ

Пробуйте var doNicely = function (this_) { var $imgs = $('img', this_), $img1 = imgs.eq(0), $img2 = imgs.eq(1);
var margin =$($img1).width()/2; var width=$($img1).width(); var height=$($img1).height();
$($img2) .stop() .css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#reflection2") .stop() .css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px'});
$($img1).mouseover(function(){ $(this) .stop() .animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500}); window.setTimeout(function() { $($img2) .stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500}); },500); }); $($img2).mouseout(function(){ $(this) .stop() .animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500}); window.setTimeout(function() { $($img1) .stop() .animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500}); },500); }); }
$(document).ready(function () { $('.vizitka').click(function () { doNicely(this); }); });

Комментариев нет:

Отправить комментарий