Простой JQuery hover увеличить

Я не уверен, где я ошибаюсь. Я пытаюсь создать очень простой плагин 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

Если кто-то знает, где я ошибся, это было бы здорово! СПАСИБО!

Ответ 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/

Ответ 2

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

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

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

Ответ 3

Чтобы создать плагин для простого плагина, попробуйте это. (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>

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