jquery - jQuery を使用して複数のクラスにアクセスする方法

Question

このjQuery関数を使用して、画像をズームし、ホバー時にスライドテキストを表示しようとしています。それぞれのサイズが異なる合計 13 枚の画像を使用したいと考えています。jQuery 関数に複数のクラスを配置すると、各画像に固有の css プロパティがあるにもかかわらず、すべてのクラスが最初のクラスの css プロパティを継承します。各クラスが最初のクラスの css コードを継承しないように関数を設計するにはどうすればよいですか?

<script>
    $(document).ready(function() {

        //move the image in pixel
        var move = -15;

        //zoom percentage, 1.2 =120%
        var zoom = 1.2;

        //On mouse over those thumbnail
        $('.zitem, .take2').hover(function() {

                    //Set the width and height according to the zoom percentage
                    width = $('.zitem, .take2').width() * zoom;
                    height = $('.zitem, .take2').height() * zoom;

                    //Move and zoom the image
                    $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:1000});

                    //Display the caption
                    $(this).find('div.caption').stop(false,true).fadeIn(200);
                },
                function() {
                    //Reset the image
                    $(this).find('img').stop(false,true).animate({'width':$('.zitem, .take2').width(), 'height':$('.zitem, .take2').height(), 'top':'0', 'left':'0'}, {duration:500});

                    //Hide the caption
                    $(this).find('div.caption').stop(false,true).fadeOut(200);
                });

    });
</script>

Answer 1

試す

var width = $(this).width() * zoom;
etc.