Jquery를 클릭하지 않은 경우 (x) 초가 자동으로 함수를 실행합니다.

Question

두 개의 div를 슬라이드하여 실행하여 뒤에 내용을 표시하는 함수가 있습니다. 클릭하면 해당 내용을 나타내는 기능이 활성화됩니다. 7 초 후에 버튼을 클릭하지 않으면 해당 기능을 자동으로 실행하는 방법을 파악하려고합니다. 어떤 도움이라도 대단히 감사 할 것입니다.

다음은 내가 가진 것입니다.

$(document).ready(function() { 

     $(".button").click(function(){ 
       $(this).fadeOut('slow'); 
        $(".leftside").animate({width:'60px'}, 500); 
        $(".rightside").animate({width:'60px'},500); 
     }); 

    }); 

Answer 1

타이머 추가

var timer = setTimeout(function() { $(".button").click(); }, 7000); 

을 그리고 당신의 버튼 클릭으로 선택을 취소 :

clearTimeout(timer); 

전체 코드 :

$(document).ready(function() { 
    var timer = setTimeout(function() { $(".button").click(); }, 7000); 
    $(".button").click(function(){ 
      clearTimeout(timer); 
      $(this).fadeOut('slow'); 
       $(".leftside").animate({width:'60px'}, 500); 
       $(".rightside").animate({width:'60px'},500); 
    }); 
}); 

Answer 2

$(document).ready(function() { 
    var myclick=setTimeout(function(){ 
     $(".button").click(); 
    }, 7000); 
    $(".button").click(function(){ 
      clearTimeout(myclick); 
      $(this).fadeOut('slow'); 
       $(".leftside").animate({width:'60px'}, 500); 
       $(".rightside").animate({width:'60px'},500); 
    }); 

}); 

Answer 3

$(document).ready(function() { 

     setTimeout(showThis(), 7000); 

     $(".button").click(showThis); 

     function showThis(){ 
       $(".button").fadeOut('slow'); 
        $(".leftside").animate({width:'60px'}, 500); 
        $(".rightside").animate({width:'60px'},500); 
     }); 

    });