16

どこが間違っているのかわかりません。スケール機能を使用して、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

誰かが私が間違っていた場所を知っていれば、それは素晴らしいことです! ありがとう！

4

4 に答える 4

23

私は通常、似たようなことを達成しようとするときに別のアプローチに従うため、コードが機能しない理由が正確にはわかりません。

しかし、あなたのコードはエラーになっています..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/

于 2013-11-19T17:56:53.953 に答える
2

拡大したい画像がページに複数ある場合は、ID に「content1」、「content2」、「content3」などの名前を付けます。次に、スクリプトを次のように拡張します。

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

編集: 「#content」CSS を次のように変更します: img[id^=content] トランジション効果を維持します。

于 2014-04-08T12:13:05.680 に答える
0

シンプルなホバー拡大プラグインを作成するには、これを試してください。 （デモ）

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%');
                   });
              });
         });
于 2013-11-19T18:06:46.470 に答える