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

Question

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

目前我在这一点上： 单击 video1 后，我重新调整了 2 个视频的大小。 在我点击相同的视频后，video2 和 video3 重新调整为原始大小。 但是如果我点击 video2（当它小 50% 时），那么 video1 会比原来的小（50%），video3 会恢复到原来的大小。

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 类，然后添加

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