hide () работает правильно, но не fadeOut ()? - PullRequest
Новая
       43

hide () работает правильно, но не fadeOut ()?

0 голосов
/ 17 февраля 2012

У меня есть слайдшоу jquery с удерживающими кадрами и видео. При щелчке по удерживающей рамке я хочу, чтобы она исчезала, а видео появлялось и воспроизводилось.

Он работает с show () и hide (), но когда я изменяю его на fadeIn () и fadeOut (), все ломается.

Есть идеи, почему это происходит? 

          $('.holdFrame1').click(function(){  
            $(".holdFrame1").delay(500).hide();         
            $(".hiddenVideo1").show(
            function(){          
               $f(players[0]).api('play');                                                                                                                     
});

Это то, чего я хотел бы достичь 

          $('.holdFrame1').click(function(){  
            $(".holdFrame1").delay(500).fadeOut('slow');         
            $(".hiddenVideo1").show(
             function(){          
               $f(players[0]).api('play');                                                                                                                     
       });
      });

Но это приводит к тому, что изображение не исчезает, а остается на месте, пока скрытое видео появляется под ним.

Ответы [ 3 ]

1 голос
/ 17 февраля 2012

Вам необходимо правильно использовать .fadeOut() (и .fadeIn()) с обратными вызовами. Итак, сигнатура метода, которую вы ищете: 

.fadeOut( [duration] [, callback] )

Я должен предсказать, как выглядит ваша разметка, но в целом это не так уж сложно. Использование: 

.videoContainer {
    background: grey;
    height: 400px;
    width: 560px;
    padding: 10px;
}
.holdFrame,
.hiddenVideo {
    width: 100%;
    height: 100%;
}
.holdFrame {
    background: green;
}
.hiddenVideo {
    background: yellow;
    display: none;
}

<div class="videoContainer">
    <div class="holdFrame">Click to play video.</div>
    <div class="hiddenVideo">Video will be here.</div>
</div>

Вы можете: 

$(".holdFrame").click(function(){
    var $this = $(this);

    $this.fadeOut(500, function(){
        $this.siblings('.hiddenVideo').fadeIn(500, function (){
            $f(players[0]).api('play');
        });
    });
});

http://jsfiddle.net/yeRxP/

Самое приятное в этом (я уверен, что я изменил вашу разметку и CSS, не зная этого), вы можете иметь более одного видеопроигрывателя на одной странице, и они не будут конфликтовать:

http://jsfiddle.net/yeRxP/2/

Поскольку я не знаком с вашим видеопроигрывателем, вам придется изменить его для воспроизведения правильного видео при обратном вызове .fadeIn().

0 голосов
/ 17 февраля 2012

http://jsfiddle.net/pA58v/

<button class="holdFrame1">test</button>

<video class="hiddenVideo1" style="border:1px solid #000"></video>​


$(document).ready(function() {

$(".hiddenVideo1").hide();  

$('.holdFrame1').click(function(){  
        $(".holdFrame1").delay(500).hide();         
        $(".hiddenVideo1").show();       
         $f(players[0]).api('play');              
      });


});
0 голосов
/ 17 февраля 2012

Если вы хотите заменить show () на fadeIn () и использовать обратный вызов, вам нужно использовать скорость, связанную с fadeIn (): 

$('.holdFrame1').click(function(){   
    $(".holdFrame1").fadeOut('slow');          
    $(".hiddenVideo1").fadeIn('slow', function(){
        $f(players[0]).api('play');
    });
});

Для получения дополнительной информации: http://api.jquery.com/fadeIn/

...