2013-10-03 1 views
1

Я использую jQuery puff effect, и мне нужно знать, как я могу вернуть Div обратно на страницу после того, как она была отдута!Эффект jQuery puff для возврата назад Div после того, как эффект был применен?

В настоящее время код будет исчезать Div (в основном это заставляет его полностью задохнуться).

Как я могу заставить его не полностью выдохнуть Div?

И как я могу сделать это так, чтобы он снова появлялся в Div после того, как он надул его?

Это простой код, я использую в данный момент:

<script> 
    $('#myButton').click(function() { 
    $("#myDiv").effect("puff", "slow"); 
    }); 
</script> 

ответ

0

Просто переключить его снова или использовать переключатель, как описано в DOCS:

$("#myDiv").toggle("puff"); 

Если вы хотите изменить непрозрачность на 50% больше, чем вернуть все обратно не прозрачен:

// 50% opacity 
$("#myDiv").animate({'opacity': 0.5}); 
//return to normal 
$("#myDiv").animate({'opacity': 1}); 

EDIT:

Вам нужно что-то вроде этого DEMO

Если вас интересует, код затяжки:

$.effects.effect.puff = function(o, done) { 
    var elem = $(this), 
     mode = $.effects.setMode(elem, o.mode || "hide"), 
     hide = mode === "hide", 
     percent = parseInt(o.percent, 10) || 150, 
     factor = percent/100, 
     original = { 
      height: elem.height(), 
      width: elem.width(), 
      outerHeight: elem.outerHeight(), 
      outerWidth: elem.outerWidth() 
     }; 

    $.extend(o, { 
     effect: "scale", 
     queue: false, 
     fade: true, 
     mode: mode, 
     complete: done, 
     percent: hide ? percent : 100, 
     from: hide ? 
      original : 
      { 
       height: original.height * factor, 
       width: original.width * factor, 
       outerHeight: original.outerHeight * factor, 
       outerWidth: original.outerWidth * factor 
      } 
    }); 

    elem.effect(o); 
}; 

Вы можете изменить его, чтобы не скрывать элемент, но я не мог сделать это быстро.

+0

есть в любом случае, чтобы остановить его от исчезновения? позволяет сохранить непрозрачность до 50%, а затем переключить ее обратно? – user2808228

+0

Просмотр отредактировал ответ – Feanor

+0

no, что я имею в виду, когда эффект облаков применяется к Div, есть ли способ остановить его полностью исчезнуть, поскольку эффект затяжки заставляет его исчезнуть и '$ (" #myDiv ") .toggle («puff»), «заставляет его снова появляться. Надеюсь, теперь я объяснил это лучше. – user2808228

0

слоеного эффект просто скрывает вас элемент, он устанавливает style="display: none;", так что вам нужно только, чтобы показать его обратно, вы могли бы использовать что-то вроде

$("#myDiv").show("slow"); 

DEMO

0

использование toggle

$('#tgBtn').toggle(function() { 
    $('#toggledDiv').animate({'opacity': 1}, function(){ 
     $('#toggledDiv').hide('puff', 750); 
    }); 
}, function() { 
    $('#toggledDiv').show('puff', 750, function(){ 
     $('#toggledDiv').animate({'opacity': 0.4}); 
    }); 
}); 

http://jsfiddle.net/q7FcA/5/

Смежные вопросы