javascript - jQuery 调整视频大小，重置大小

Question

我有 3 个视频。我想做的是: 点击 video1 > video2 和 video3 缩小 50% > 点击 video2 > video1 和 video3 重置为原始大小 > video1 和 video3 缩小 50%。

我现在的状态是: 单击视频 1 后，我重新调整了 2 个视频的大小。 在我点击同一个视频后，video2 和 video3 重新调整为原来的大小。 但是，如果我点击视频 2(当它变小 50%)时，视频 1 会比原来的小(缩小 50%)，视频 3 会恢复到原来的大小。

Fiddle DEMO (出于某种原因，它在我的电脑上不起作用)。

HTML代码:

<div>
    <video id="video1" class="normal" height="200" width="300">
    <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
     HTML5 Video is required for this example. 
    </video>
</div>

<div>
    <video id="video2" class="normal" height="200" width="300">
    <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
     HTML5 Video is required for this example. 
    </video>
</div>


<div>
    <video id="Video3" class="small" height="200" width="300">
    <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
     HTML5 Video is required for this example. 
    </video>
</div>

CSS 代码:

.normal {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
        transform: scale(1, 1);
}

.big {
   -webkit-transform: scale(2, 2);
   -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
        transform: scale(2, 2);

}

.small {
    -webkit-transform: scale(0.5, 0.5);
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
}

#video1{
-webkit-transition: -webkit-transform 0.3s ease-in;
   -moz-transition: -moz-transform 0.3s ease-in;
    -ms-transition: -ms-transform 0.3s ease-in;
        transition: transform 0.3s ease-in;
}
#video2{
-webkit-transition: -webkit-transform 0.3s ease-in;
   -moz-transition: -moz-transform 0.3s ease-in;
    -ms-transition: -ms-transform 0.3s ease-in;
        transition: transform 0.3s ease-in;
}
#video3{
    -webkit-transition: -webkit-transform 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-in;
    -ms-transition: -ms-transform 0.3s ease-in;
    transition: transform 0.3s ease-in;
}

JavaScript 代码:

$("#video1").on('click', function() {
    $(this).toggleClass('big');
    $("#video2").toggleClass('small');
    $("#video3").toggleClass('small');
});

$("#video2").on('click', function() {
    $(this).toggleClass('big');
    $("#video1").toggleClass('small');
    $("#video3").toggleClass('small');
});

$("#video3").on('click', function() {
    $(this).toggleClass('big');
    $("#video1").toggleClass('small');
    $("#video2").toggleClass('small');

});

如何在调整视频大小之前重置视频大小？

提前致谢!

Answer 1

切换类是一个很好的特性，但我认为这不是您在这里使用的最佳选择。 认为您可以使用单个函数并用所有函数调用它，接近

function videoClicked(e)
{
    //get a referance to the video clicked
    var sender = e.target;

    //get all the videos 
    var $videos = $('.videos');
    //if the sender had class big it was already clicked and we need to reset all to normal
    if($(sender).hasClass('big'))
    {
        //remove all big classes
        $videos.removeClass('big');
        //and small class
        $videos.removeClass('small');
        //then add normal class
        $videos.addClass('normal');
        //we are done, lets go home
        return;
    }

    //remove big from all videos
    $videos.removeClass('big');
    //add small to videos that were not the sender (aka clicked video)
    $videos.not(sender).addClass('small');
    //add big to the sender
    $(sender).addClass('big');
}

我会添加一个类 .video 到 all 然后添加

//this is jquery short hand for an on load function
$(function()
{
    //add event for all videos 
    $('.video').click(videoClicked);
});