Увеличение картинок при наведение
Я уже создавал тему с этим скриптом, но теперь я его доработал/развил(в меру моего малого опыта это и так можно назвать:) )
Собственно вот в чем проблема: скрипт я писал в jsFiddle, и там все работает, но когда и копирую весь код на хостинг или на компьютер, то он не работает, причем вообще javascript отказывается работать(хотя и библиотеку jQuery я везде подключал одинаковой версии) Вот часть html кода: <div id="wrapper"><div id="menu"> <img src="buttA1.png" class="zoom" alt="" /> <img src="buttB1.png" class="zoom" alt="" /> <img src="buttC1.png" class="zoom" alt="" /> <img src="buttD1.png" class="zoom" alt="" /> <img src="buttE1.png" class="zoom" alt="" /> </div></div> Вот сам скрипт: // Самое важное, это первая часть, отвечающая за расчет длины блока и его позиционирование по центру в зависимости от общего размера всех картинок, она и является моей доработкой var menulen = 0; $("#menu").children('img').each(function(indx, element){menulen += $(element).outerWidth(true);}); $("#menu").css({"margin-right":function(i,val){val = (menulen/2)*(-1); return val;}, "margin-top":"0"}); $("#menu").children('img').last().prevAll() .css("margin-right", function(i,val){ var lenth = $(this).width(); val = Math.round((200 -lenth)/2); return val;}); //далее вторая часть, отвечающая за само изменение размеров картинок, ранее была только она, и она работала... $(function(){ $('.zoom').hover(function(){ var name = $(this).attr("src"); $(this).stop().animate({width:"200px",height:"200px",left:"-40px",top:"-40px"}, 400); name = name.replace(/1/g, "2"); $(this).attr("src",name); }, function(){ var name = $(this).attr("src"); $(this).stop().animate({width:"100px",height:"100px",left:"0",top:"0"}, 400); name = name.replace(/2/g, "1"); $(this).attr("src",name); }); }); |
$(function(){ var menulen = 0; $("#menu").children('img').each(function(indx, element){menulen += $(element).outerWidth(true);}); $("#menu").css({"margin-right":function(i,val){val = (menulen/2)*(-1); return val;}, "margin-top":"0"}); $("#menu").children('img').last().prevAll() .css("margin-right", function(i,val){ var lenth = $(this).width(); val = Math.round((200 -lenth)/2); return val;}); $('.zoom').hover(function(){ var name = $(this).attr("src"); $(this).stop().animate({width:"200px",height:"200px",left:"-40px",top:"-40px"}, 400); name = name.replace(/1/g, "2"); $(this).attr("src",name); }, function(){ var name = $(this).attr("src"); $(this).stop().animate({width:"100px",height:"100px",left:"0",top:"0"}, 400); name = name.replace(/2/g, "1"); $(this).attr("src",name); }); }); Скорее всего. |
Спасибо, вроде заработало.
Но! теперь появился вопрос по второй части скрипта: $(function(){ $('.zoom').hover(function(){ var name = $(this).attr("src"); $(this).stop().animate({width:"200px",height:"200px",left:"-40px",top:"-40px"}, 400); name = name.replace(/1/g, "2"); $(this).attr("src",name); }, function(){ var name = $(this).attr("src"); $(this).stop().animate({width:"100px",height:"100px",left:"0",top:"0"}, 400); name = name.replace(/2/g, "1"); $(this).attr("src",name); }); }); Если спокойно наводить курсор и отводить только по одной картинки, то все нормально меняет размеры, а вот если провести по всем картинкам сразу, то они начинают "подвисать", значение их размеров зависает на промежуточных значениях... Может все дело в stop() и я его как то неправильно применяю? |
More916,
Попробуйте так: $(function(){ $('.zoom:not(.active)').live('mouseenter',function(){ $(this).addClass('active'); var name = $(this).attr("src"); $(this).stop().animate({width:"200px",height:"200px",left:"-40px",top:"-40px"}, 400); name = name.replace(/1/g, "2"); $(this).attr("src",name); }); $('.zoom.active').live('mouseleave',function(){ var name = $(this).attr("src"); $(this).stop().animate({width:"100px",height:"100px",left:"0",top:"0"}, "linear", function(){$(this).removeClass('active');}, 400); name = name.replace(/2/g, "1"); $(this).attr("src",name); }); }); |
Не.. так еще хуже... =( вообще только в одном направлении меняются...
|
Цитата:
Живая ссылка есть ? |
http://jsfiddle.net/m/dfx/
Тут самая левая картинка все время в бок уходит, это просто я не доделал, а вот почему их размеры слетают если по всем сразу поводить курсором... |
More916,
Чот я попадаю на ввод акка |
Часовой пояс GMT +3, время: 07:00. |