простой JQuery hover enlarge

Question

Я не уверен, где я ошибся. Я пытаюсь создать очень простой плагин hover-enlarge с Jquery, используя функцию масштабирования. Вот мой код:

$(document).ready(function(){ 
    $("#content img").toggle("scale",{ 
     percent: "80%" 
    },0); 
$('#content img').hover(function() { 
    $(this).css("cursor", "pointer"); 
    $(this).toggle("scale",{ 
     percent: "90%" 
    },500); 

}, function() { 
    $(this).toggle("scale",{ 
     percent: "80%" 
    },500); 

}); 
}); 

Вот небольшой пример: http://jsfiddle.net/8ECh6/

Вот страница: http://samples.zcardna.com/health.html

Если Сомон знает, где я пошло не так, что бы удивительным! СПАСИБО!

Answer 1

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

Но ваш код является ошибкой .. Кажется, проблема связана с тем, как вы используете scale. Я получил jQuery для фактического выполнения, изменив код на следующее.

$(document).ready(function(){ 
    $('img').hover(function() { 
     $(this).css("cursor", "pointer"); 
     $(this).toggle({ 
      effect: "scale", 
      percent: "90%" 
     },200); 
    }, function() { 
     $(this).toggle({ 
      effect: "scale", 
      percent: "80%" 
     },200); 

    }); 
}); 

Но я всегда делал это с помощью CSS для настройки моего масштабирования и перехода ..

Вот пример, надеюсь, что это помогает.

$(document).ready(function(){ 
    $('#content').hover(function() { 
     $("#content").addClass('transition'); 

    }, function() { 
     $("#content").removeClass('transition'); 
    }); 
}); 

http://jsfiddle.net/y4yAP/

Answer 2

Чтобы создать простой парения плагин увеличьте, попробуйте это. (DEMO)

HTML

 <div id="content"> 
    <img src="http://www.freevectorgallery.com/wp-content/uploads/2011/10/Vintage-Microphone- 11395-large.jpg" style="width:50%;" /> 
    </div> 

JS

 $(function() { 
      $('#content img').hover(function() { 
      $(this).toggle(function() { 
      $(this).width('70%'); 
        }); 
       }); 
     }); 

Answer 3

Если у вас есть более чем 1 изображение на странице, что вы хотите увеличить, назвать идентификаторам, например "Content1" , "content2", "content3" и т. д. Затем расширьте скрипт следующим образом:

$(document).ready(function() { 
    $("[id^=content]").hover(function() { 
     $(this).addClass('transition'); 
    }, function() { 
     $(this).removeClass('transition'); 
    }); 
}); 

Редактировать: Изменить «#content» CSS на: img [id^= content], чтобы остаться с эффектами перехода.