Jquery 불투명도 페이드 아웃 루프

Question

내 고객 중 한 명이 div에 깜박임 효과를 주도록 요청했습니다. 나는 이것이 그를위한 최선의 방법이 아닐 수도 있다고 생각합니다. 불투명도의 안과 밖에서 빛이 희미 해지면 고객의 귀찮음이없이 고객의 관심을 끌 것입니다.

내가 현재 가지고

<a class="special_button" href="#">Special Offers &rsaquo;</a> 

I이 브라우저 부하에의 페이드 원인이 다른 사업부, 다음 코드 :

$('.logo-top').delay(700).animate({ 
    'opacity' : '1',   
    'top' : '+=40px' 
}, { duration: 700, easing: 'swing' }); 

어떻게의 special_button 비슷한 일을 할 것이지만, 불투명도를 반복하는 대신? 80에서 100에 이르기까지? 그것은 어쩌면 5.

가장 좋아하는, 시간의 일정 금액을 반복하면 그것은 더 나은 것

, 스테판

Answer 1

당신은 아마이 jsFiddle 같은 것을 갖고 싶어.

그리고 카운터를 유지하여 깜박이는 횟수를 지정할 수도 있습니다. jsFiddle에서

코드 :

$(document).ready(function() { 
    function runIt() {   
     var baloon = $('#baloon'); 
     baloon.animate({opacity:'1'}, 1000); 
     baloon.animate({opacity:'0.5'}, 1000, runIt); 
    } 
    runIt(); 
}); 

Answer 2

당신은 이런 식으로 작업을 수행 할 수 있습니다;

(function() { 
    var cnt = 0; 
    var specials = $(".special_button"); 

    function next() { 
     if (cnt < 5) { 
      specials.fadeTo(2000, .1).fadeTo(2000, 1, next); 
      ++cnt; 
     }      
    } 

    next(); 
})(); 
​ 

근무 데모 : http://jsfiddle.net/jfriend00/558GY/

참고로, 80 %, 100 % 불투명도의 차이는 매우 미묘하다. 나는 데모에서 훨씬 더 큰 차이를 만들었다. 원하는 효과를 분명히 조정할 수 있습니다.

Answer 3

지금까지 내가 당신이 여기의 깜박이는 무언가를 원하는 이해 :

$("document").ready(function() { 
    anm(".special_button"); 
}); 
function anm(element) { 
    $(element).delay(200).animate({ opacity: 'toggle' }, 1000, function() { anm(element); }); 
} 

데모 : http://jsfiddle.net/BerkerYuceer/GdcRs/

Answer 4

는 왜 사용 CSS3 키 프레임을?

.twinkle { 
 
    background: red; 
 
    padding: 0.2em; 
 
    margin: 50px; 
 
} 
 

 
@-webkit-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-moz-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-ms-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
.twinkle { 
 
    -webkit-animation: twinkly 1s alternate infinite; 
 
    -moz-animation: twinkly 1s alternate infinite; 
 
    -ms-animation: twinkly 1s alternate infinite; 
 
    animation: twinkly 1s alternate infinite; 
 
}

<span class="twinkle">Special Offers &rsaquo;</span>

당신은 오래된 브라우저를위한 대체를 사용할 수 있습니다. 다른 스크립트가 좋았지 만 나는 울란의 해결책을 조언 할 것이다.

Answer 5

짧은 코드를 원할 경우 plugin jquery-timing을 jQuery의 타이밍 항목으로 사용하십시오. , 당신은 어,

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$).until(20); 

쿨 쓰기

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$); 

아, 그리고 당신이 원하는 때 (예를 들어 20) 특정 횟수를 전환 : 그것은 당신의 전체 코드를 축소?