J'ai une situation dans laquelle je ne peux pas utiliser Jquery UI pour une raison quelconque. J'essaie d'obtenir l'effet Pulsate de Jquery UI sans utiliser l'interface utilisateur Jquery. Similaire à ce lien, http://docs.jquery.com/UI/Effects/Pulsate . J'ai beaucoup cherché mais je n'ai rien trouvé.
Je ne sais pas à quoi ressemble le code IU original, mais c'est une implémentation super simple utilisant la fonction animée:
$.fn.pulse = function(options) { var options = $.extend({ times: 3, duration: 1000 }, options); var period = function(callback) { $(this).animate({opacity: 0}, options.duration, function() { $(this).animate({opacity: 1}, options.duration, callback); }); }; return this.each(function() { var i = +options.times, self = this, repeat = function() { --i && period.call(self, repeat) }; period.call(this, repeat); }); }; $("div").click(function() { $(this).pulse({times: 4, duration: 500}); }); Vérifiez la démo ci-dessous ou ce JsFiddle .
$("div").click(function() { $(this).stop().pulse({times: 4, duration: 300}); }); $.fn.pulse = function(options) { var options = $.extend({ times: 3, duration: 1000 }, options); var period = function(callback) { $(this).animate({opacity: 0}, options.duration, function() { $(this).animate({opacity: 1}, options.duration, callback); }); }; return this.each(function() { var i = +options.times, self = this, repeat = function() { --i && period.call(self, repeat) }; period.call(this, repeat); }); };
div {background-color: green; padding: 20px; display: inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Click me</div>
Vous pouvez copier la source de l'effet de pulsation jquery et l'ajouter à votre projet.
Mais quel est le point, si vous pouvez ajouter ce fichier à votre projet, pourquoi ne pas simplement ajouter le fichier original jquery ui pulsate.
Vous n'avez pas à réparer l'ensemble de jquery-ui, juste les pièces que vous voulez: http://jqueryui.com/download/ .
Il existe un plugin jquery autonome pour l'effet pulsé ici: