Question

我正在尝试制作一个有图像的网站（播放按钮）。按下时会出现iframe，图像应慢慢转90度。当再次点击图像时，iframe应该消失，图像应该旋转90度到原始图像，但到目前为止我无法使其工作。

我猜我的jQuery有问题，但一直无法找到问题。

以下是一个例子：

HTML：

    <div id="TrailerBox">
        <img id="PlayButton"/>
        <iframe id="video" class="hidden" src="https://www.youtube.com/embed/kAauqkWuZg4">

        </iframe>
    </div>

CSS：

#TrailerBox {
    width:20em;
    height:10em;
    background-color:blue;
}

#PlayButton {
        width: 5em;
        height: 10em;
        cursor: pointer;
        background-color:red;
}

#video {
        width: 900px;
        height: 542px;
}

.hidden {
    display:none;
}

jQuery的：

$( document ).ready(function() {
    var NumberOfClicks = 0;
        $('#TrailerBox img.PlayButton').click(function(e) {
            e.preventDefault();
            $('#video').toggleClass('hidden');

            NumberOfClicks++;
            if (NumberOfClicks = 1) {
                        $(this).css({
                            '-webkit-transform': 'rotate(' + 90 + 'deg)',
                            '-moz-transform': 'rotate(' + 90 + 'deg)',
                            '-ms-transform': 'rotate(' + 90 + 'deg)',
                            'transform': 'rotate(' + 90 + 'deg)'
                        });
                        $(this).rotate(rotation);
                };
            }
            if (NumberOfClicks = 2) {
                        $(this).css({
                            '-webkit-transform': 'rotate(' + -90 + 'deg)',
                            '-moz-transform': 'rotate(' + -90 + 'deg)',
                            '-ms-transform': 'rotate(' + -90 + 'deg)',
                            'transform': 'rotate(' + -90 + 'deg)'
                        });
                        $(this).rotate(rotation);
                };
                NumberOfClicks = 0;                    
            }
   });

Answer 1

这里一个很好的解决方案可以让你的生活压力减少，那就是设置一个具有这些设置的css类，并使用缓动来进行转换。这创建了我认为您正在寻找的动画效果，并且更容易跟踪，因此下面的选择器的CSS将是：

    #PlayButton {
        width: 5em;
        height: 10em;
        cursor: pointer;
        background-color:red;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.4s ease-in;
        -moz-transition: all 0.4s ease-in;
        -o-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
    }

.rotateOn{-webkit-transform: rotate(90deg)!important;
                     -moz-transform: rotate(90deg)!important;
                     -ms-transform: rotate(90deg)!important;
                     transform: rotate(90deg)!important;
                    -webkit-transition: all 0.4s ease-in;
                    -moz-transition: all 0.4s ease-in;
                    -o-transition: all 0.4s ease-in;
                    transition: all 0.4s ease-in;
       }

和jquery可以是：

`$(document).ready(function(){
    $rotated = false;
    $('#TrailerBox img#PlayButton').click(function(){
       $(this).toggleClass('rotateOn');
    });
});`

Answer 2

使用此代码，如果这是您想要的：

$(document).ready(function(){
    $rotated = false;
    $('#TrailerBox img#PlayButton').click(function(){
        if($rotated == false){
            $(this).css({
                '-webkit-transform': 'rotate(' + 90 + 'deg)',
                '-moz-transform': 'rotate(' + 90 + 'deg)',
                '-ms-transform': 'rotate(' + 90 + 'deg)',
                'transform': 'rotate(' + 90 + 'deg)'
             });
             $rotated = true;
        }else{
            $(this).css({
                '-webkit-transform': 'rotate(' + 0 + 'deg)',
                '-moz-transform': 'rotate(' + 0 + 'deg)',
                '-ms-transform': 'rotate(' + 0 + 'deg)',
                'transform': 'rotate(' + 0 + 'deg)'
             });
             $rotated = false;
        }
    });
});

http://jsfiddle.net/d4mk9eu3/2

如何在点击时旋转图像，然后再次单击后将其旋转回来？使用HTML，CSS和jQuery

2 个答案: