在页面上调用函数单击

时间:2015-10-27 08:08:48

标签: jquery

页面上有2个按钮,即playstopvideo在加载时播放并显示stop按钮。点击stop按钮将停止播放视频并显示play按钮。

var videoMode = false,
    videoModeSelector = '#intro .mouse, #intro .content, .slider.fullscreen .overlay';
$(window).load(function () {
    $(videoModeSelector).animate({
        opacity: 0
    }, {
        duration: 500,
        queue: false,
        complete: function () {
            if (!videoMode) {
                $('.slider').unmuteYTPVolume();
                $('<div />').appendTo('#intro').css({
                    position: 'absolute',
                    textAlign: 'center',
                    bottom: '30px',
                    color: '#FFF',
                    left: 0,
                    right: 0,
                    opacity: 0
                }).addClass('click-to-exit');
                $('<i />').appendTo('.click-to-exit').addClass('fa fa-volume-off');
                setTimeout(function () {
                    $('.click-to-exit').animate({
                        opacity: 1
                    }, {
                        duration: 500,
                        queue: false,
                        complete: function () {}
                    });
                }, 500);
            }
            videoMode = true;
            $(this).hide();
        }
    });
});
$that.click(function (evt) {
    if (videoMode && $(evt.target).is('.fa-volume-off')) {
        $('.slider').muteYTPVolume();
        $(videoModeSelector).show().animate({
            opacity: 1
        }, {
            duration: 500,
            queue: false
        });
        $that.find('.click-to-exit').hide();
        videoMode = false;
    } else {
        $('.slider').unmuteYTPVolume();
        $(videoModeSelector).show().animate({
            opacity: 0
        }, {
            duration: 500,
            queue: false
        });
        $that.find('.click-to-exit').show();
        videoMode = true;
    }
});

工作正常。现在我想在页面上添加click功能。点击该页面后,视频会停止并显示play按钮,但play按钮无效。关于如何解决它的任何想法?

$(document).click(function () {
    if (videoMode) {
        $('.slider').muteYTPVolume();
        $('.click-to-exit').hide().animate({
            opacity: 0
        }, {
            duration: 500,
            queue: false
        });
        $(videoModeSelector).show().animate({
            opacity: 1
        }, {
            duration: 500,
            queue: false
        });
        videoMode = false;
    }
});

2 个答案:

答案 0 :(得分:0)

您的播放按钮是“文档”的子部分。因此,下面的代码会覆盖所有其他元素的click事件处理程序。

"" +

您可以直接将此处理包装到以下条件中:

$(document).click(function(  if ( videoMode )  {
            $( '.slider' ).muteYTPVolume( );
            $( '.click-to-exit' ).hide( ).animate( { opacity: 0 }, { duration: 500, queue: false } );
            $( videoModeSelector ).show( ).animate( { opacity: 1 }, { duration: 500, queue: false } );            
            videoMode = false;
        }
    }); 

答案 1 :(得分:0)

这个功能运行正常 但是你又点击播放按钮这个函数调用:(

   public final class Constants {



public static final String[] IMAGES = new String[] {
        // Heavy images
            "file:///sdcard/DCIM/IMG_20151026_172237570.jpg", // Image from SD card with encoded symbols
            "file:///sdcard/DCIM/IMG_20151026_172241845.jpg", // Image from SD card with encoded symbols
            "file:///sdcard/DCIM/IMG_20151026_172251959.jpg", // Image from SD card with encoded symbols
            "file:///sdcard/DCIM/IMG_20151026_172255739.jpg", // Image from SD card with encoded symbols
            "file:///sdcard/DCIM/IMG_20151026_172258063.jpg", // Image from SD card with encoded symbols
        "file:///sdcard/DCIM/IMG_20151026_172258063.jpg", // Image from SD card with encoded symbols
        "file:///sdcard/DCIM/IMG_20151026_172258063.jpg", // Image from SD card with encoded symbols




};

private Constants() {
}

public static class Config {
    public static final boolean DEVELOPER_MODE = false;
}

public static class Extra {
    public static final String FRAGMENT_INDEX = "com.nostra13.example.universalimageloader.FRAGMENT_INDEX";
    public static final String IMAGE_POSITION = "com.nostra13.example.universalimageloader.IMAGE_POSITION";
}
}