O'zgarishdan so'ng divni 15 soniya ichida qanday saqlash kerak

Menda sahifa yukida o'chiriladigan musiqa pleyeri bor. O'yinchilarni ko'rsatish uchun foydalanuvchilar tugmachani bosish kerak. O'yinchini ko'rsatishga o'tishdan keyin va sichqonchani o'ynatgichga surib qo'yishi bilan uni qanday qilib o'chirib qo'yishim mumkin?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
    $(".scplay").hide();
    

    $(".musicbutton").click(function(){
        $(".scplay").fadeToggle();
    });

        
    $(".scplay").hover(function(){
        $(".scplay").show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>
</div> </div>
0
setTimeout() bilan harakat qilib ko'ring;
qo'shib qo'ydi muallif krychuq, manba
hover ustidagi show() chaqiruvi kerak emas, chunki element allaqachon birinchi marta ko'rinadigan ko'rinishi kerak
qo'shib qo'ydi muallif Rory McCrossan, manba

9 javoblar

setTimeout() usulidan foydalanishingiz mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  var element = $(".scplay");
  element.hide();
  $(".musicbutton").click(function() {
    element.fadeToggle(3000, function() {
      setTimeout(function() {
        //your code here
        element.css('color', '#F00');
      }, 15000)

    });
  });
  //this does not make sense
  element.hover(function() {
    element.show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>
</div> </div>

Agar yashirin elementida hover dan foydalanish mantiqiy bo'lmasa, element hover ni ishlatish uchun ko'rinadigan bo'lishi kerak u. Agar boshqa yordam kerak bo'lsa, faqat so'zni ayting.

2
qo'shib qo'ydi

Men nima qilishni xohlayotganingizdan amin emasman, lekin fadeToggle() bilan sizda ko'p nazorat yo'q.

Siz nima qila olsangiz, ikkita alohida fadein va fadeOut funksiyalarini ajratish

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(".musicbutton").click(function(){
   if($(this).hasClass("active")){ //when button is clicked OFF
      $(".message").empty().text("you just unclicked button - wait 1,5 second");
      setTimeout(function(){
          $(".scplay").fadeOut();
          $(".message").empty().text("button is un-clicked, cool!");
      }, 1500);
      $(this).removeClass("active");
   }  else {//when is clicked
      $(".scplay").fadeIn();
      $(".message").empty().text("button is clicked");
      $(this).addClass("active");
   }   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="musicbutton">My button</div>

<div class="message"></div>
</div> </div>

Keyinchalik siz fadeOut() yoki fadeIn() funktsiyalarida qayta qo'ng'iroq qilishingiz mumkin

$(".scplay").fadeOut(400, function(){  
do whatever you want after animation complete
});
0
qo'shib qo'ydi

Buni ko'ring, setTimeout funktsiyasidan foydalanishingiz mumkin.

$(document).ready(function(){
   $(".scplay").hide();    

   $(".musicbutton").click(function(){
      $(".scplay").fadeToggle();
   });

  $(".scplay").hover(function(){
    $(".scplay").show();
    setTimeout(function() { $('.scplay').fadeOut('fast'); }, 15000);
  });
});
0
qo'shib qo'ydi

FadeToggle funktsiyasini o'tishning oxirida yuzaga kelishi mumkin, shuning uchun siz setTimeout funksiyasidan o'tishingiz kerak, bu fadeOutni yana bir marta o'zgartiradi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
    var $scplay = $(".scplay");//to avoid extra calling of jQuery function
    $scplay.hide();
    

    $(".musicbutton").click(function(){
        $scplay.fadeToggle(function() {
             setTimeout(function(){ $(".scplay").fadeOut(); }, 15000);
        });
    });

        
    $scplay.hover(function(){
        $scplay.show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>
</div> </div>
0
qo'shib qo'ydi
  • Sozlash uchun setTimeout() funktsiyasidan foydalaning .scplay hover emas.
  • Boolean (bPlayerStatus) yordamida setTimeoutni boshqarish.
  • Bu erda setTimeout setTime() deb ataladigan alohida funksiyada.
  • Shunday qilib, "hover" hodisasi sodir bo'lganda (setTimeout) o'chiriladi.
  • .musicbutton "klik" yoki .scplay "mouseleave" paydo bo'lganda setTimeout (togglePlayer, 15000) o'rnatiladi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
  var bPlayerStatus = false,
      scplay = $(".scplay"),
      t;

  scplay.hide();

  function togglePlayer() {
    scplay.fadeToggle();
  }
  function setTime() {
    clearTimeout (t); 
    if (!bPlayerStatus) {
      t = setTimeout (togglePlayer, 5000);
    }
  }

  $(".musicbutton").click(function(){
    bPlayerStatus = false;
    togglePlayer ();
    setTime ();
  });

  scplay.hover(function(){
    if (!bPlayerStatus) {
      bPlayerStatus = true;
      setTime ();
    }
  });   
  $(scplay).mouseleave(function(){
    bPlayerStatus = false;
    setTime ();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>
</div> </div>
0
qo'shib qo'ydi

Calling hover on a hidden element is not possible you can put .scplay class inside a div and call hover event on that div here is a jsfiddle: https://jsfiddle.net/kdr7pL1s/

0
qo'shib qo'ydi
$(".musicbutton").click(function(){
        setTimeout(function(){$(".scplay").fadeToggle();},15000);

    });

Bu siz uchun ishni qiladi. $ (". Scplay") bajariladi. FadeToggle (); kodi 15000ms dan keyin

0
qo'shib qo'ydi
<div class="scplay" ng-if="showTrue">scplay</div>
$scope.showTrue==true;
$scope.login $timeout(function() { $scope.showTrue = false; }, 15000); 
0
qo'shib qo'ydi

JQuery show() yoki toggle() funktsiyalaridan har foydalanishda qayta qo'ng'iroq qilish funktsiyasidan foydalaning.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
    $(".scplay").hide();
    
    function callback(){
        clearTimeout(t);
        window.t = setTimeout(function() {
            $(".scplay").hide();
        }, 15000);
    }

    $(".musicbutton").click(function(){
        $(".scplay").fadeToggle(callback);
    });

        
    $(".scplay").hover(function(){
        $(".scplay").show(callback);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>
</div> </div>
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb