Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2012, 21:23
Интересующийся
Отправить личное сообщение для dimon888951 Посмотреть профиль Найти все сообщения от dimon888951
 
Регистрация: 09.02.2012
Сообщений: 24

стоп в анимации
Не могу понять,как это работает и зачем вообще нужен stop.
Увеличение,затем уменьшение картинки при hover.
При наведение на картинку ,начинается увеличение, при уходе с картинке уменьшение.
При многократном наведении,до завершения анимации,картинка начинает вести себя...либо уменьшается до минимума, либо увеличивается до бесконечности.Как с этим бороться?
Понятное дело ,можно жестко задать размеры и затем их контролировать,ну зачем тогда нужен stop().
Логически я то понимаю, что идет увеличение в 2 раза,я убираю мышь,начинается уменьшение но не с максимума, а стой величины, которой достигла картинка до снятия мыши,следовательно размер при завершении анимации будет меньше первоначального.Это все понятно, вот как решается этот вопрос, в инете ничего не нарыл, по этому поводу.Собственно сам код:
$(document).ready(function(){


$('.im').hover(function(){
        
       
        $(this).stop().animate(
    {
        width:$(this).width()*2,
        height:$(this).height()*2, 
        
        
    },2000)
    
    
    },function(){
    
    $(this).stop().animate(
    {
        width:$(this).width()/2,
        height:$(this).height()/2,
       
        
    },2000)
    
    
    });

если же stop(true,true); тогда никаких казусов,но при уходе мыши скачок до тех размеров,которые должны быть, можно ли ,как то другими методами решить?

Последний раз редактировалось dimon888951, 17.02.2012 в 21:49.
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2012, 22:00
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от dimon888951
зачем вообще нужен stop
сравните, со stop и без (поводите мышкой)
<style>img {position: absolute;} img + img {left: 150px}</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {

	$('img:first').hover(function () {
		$(this).animate({height:100}, 2000);
	}, function () {
		$(this).animate({height:50}, 2000);
	}); 
	
	$('img:last').hover(function () {
		$(this).stop().animate({height:100}, 2000);
	}, function () {
		$(this).stop().animate({height:50}, 2000);
	}); 	
	
});  
</script>
<img src=http://placehold.it/50> <img src=http://placehold.it/50>

Последний раз редактировалось Pavel M., 17.02.2012 в 22:13.
Ответить с цитированием
  #3 (permalink)  
Старый 17.02.2012, 22:12
Интересующийся
Отправить личное сообщение для dimon888951 Посмотреть профиль Найти все сообщения от dimon888951
 
Регистрация: 09.02.2012
Сообщений: 24

Спасибо,уяснил
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающий блок посредством CSS анимации и JS Zub Элементы интерфейса 5 19.01.2012 14:10
Ресайз анимационного Gif с сохранением анимации Manjuriano Серверные языки и технологии 1 03.11.2011 11:28
Предотвращение многократного воспроизведения анимации titansword jQuery 2 21.05.2011 21:42
Определение смещения в момент анимации. 0931454574 jQuery 6 13.05.2011 09:55
Порядок выполнения анимации Tohin jQuery 3 03.07.2009 11:52