jQuery를 애니메이션

내가 플리 피 (flippy)라는 플러그인을 사용하여 애니메이션을 시도하고있어 사업부가 있습니다. 애니메이션을 올바르게 설정했지만 사용자가 div 안에 여러 번 마우스를 올려 놓으면 애니메이션이 계속 실행됩니다.jQuery를 애니메이션

는 지금 애니메이션은 사용자가 먼저 애니메이션을 인스턴스화하는 사업부를 클릭 한 후 요소를 가리킬 때마다 발생합니다.

내 목표 : 사업부를 통해

사용자 마이스.
새로운 콘텐츠로 새 div로 전환됩니다 (넘김).
사용자는 전환 (플립) 다시 원래 상태로 복귀의 아웃 마이스 경우.
애니메이션이 완료되고 사용자가 밖으로 마이스 다음 애니메이션이 시작하기 위해서는 다시 클릭 다시 그들이 가지고있는 사업부로 이동합니다.

여기에 지금있는 코드가 있습니다. 분명히 웨슬리 매치 씨에게 감사의 말을 전할 수는 없습니다. jsFiddle에 대한 코멘트보기. 플립 스크립트를 위해

$(document).ready(function() { 
    var url2 = "http://static.blazonco.com/customcss/dyllen/HayworthCreative/js/jquery.flippy.min.js"; 
    $.getScript(url2, function() { 
     $("#myFlippyBox").one("click", function() { 
      $(this).flippy({ 
       color_target: "#a7a7a7", 
       verso: "<p class='title'>This is a stock image</p>", 
       onFinish: function() { 
        $("#myFlippyBox").hover(function() { 
         $(this).flippyReverse({ 
          color_target: "#a7a7a7 ", 
          recto: "<img src='http://static.blazonco.com/customcss/dyllen/HayworthCreative/images/ceo.jpeg'/>" 
         }); 
         return false; 
        }); 
       } 
      }); 
     }); 
    }); 
});

출처

2013-05-24 djowinz

당신이 http://jsfiddle.net/djowinz/N5tvC/ – djowinz

내가 혼란 스러워요 여기 내 바이올린을보고 싶은 경우에, 당신은 왜 바이올린을 게시 할 수 없습니다? 어쨌든, 당신의 논리를 생각해 보면, 그것은 잘 풀리지 않습니다. 마우스를 올리거나 마우스를 올려 놓지 않았을 때 뒤집기를 원하지만 클릭했을 때만 활성화하고 싶습니까? 그래서 내가 네가 원하는 것 같아. 클릭하면 뒤집어지기를 원하고 밖으로 마우스를 가져갈 때 뒤집을 수 있습니다. 마우스 오버가 다시 활성화되는 것을 원하지 않는다고 추측합니다. 플립을 풀기위한 마우스 아웃 만 맞습니까? –

이 http://jsfiddle.net/N5tvC/4/입니다. 정말로 원하는 것을 원하십니까? – Spokey

내가 재사용 할 수있는 기능을 만들어 다른 이벤트에 여러 번 사용할 수 있습니다.

http://jsfiddle.net/N5tvC/4/

function flip(t) { // t is the id/class of the element 
    $(t).off().flippy({ // here instead of t you can also write #myFlippyBox and remove it 
     // .off() removes mouseout/mouseover handlers 
     color_target: "#a7a7a7", 
     verso: "<p class='title'>This is a stock image</p>", 
     onFinish: function() { 
      $('#myFlippyBox').off().on('mouseout', function() { 
              // remove handles again and add mouseout 
       flipBack('#myFlippyBox'); 
      }); 
     }, 
     onReverseFinish: function() { 
      $('#myFlippyBox').off().on('click', function(){ 
       flip('#myFlippyBox'); 
      }); 
     } 
    }); 
} 

function flipBack(t) { 
    $(t).flippyReverse({ 
     color_target: "#a7a7a7 ", 
     recto: "<img src='http://static.blazonco.com/customcss/dyllen/HayworthCreative/images/ceo.jpeg'/>" 
    }); 
} 


$(function() { 
    $("#myFlippyBox").on('mouseover', function() { 
     // at start bind mouseover and run function flip() 
     flip('#myFlippyBox'); // here you send the id/class of the element 
    }); 
});

출처

2013-05-24 22:30:08 Spokey

jQuery를 애니메이션

답변

관련 문제