Сразу скажу чтобы в дальнейшем не было вопросов. Вроде "А что так уже не делают?!, разве нельзя просто сделать вот так?! и т.д". В 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);
});
});
Комментариев нет:
Отправить комментарий