How to make this button pulsate on jQuery mobile?
Are there problems with jQuery mobile because in my main application on some divs I can apply this pulsating effect and on other they just flicker, or fade in and out with interruptions or it jerky fades in and out.
html:
<button id="pulsate">I want to pulsate!</button>
JS:
$('#pulsate').on('click', function () {
pulsate("#pulsate");
});
function pulsate(element) {
$(element || this).animate({ opacity: 0 }, 500, function() {
$(this).animate({ opacity: 1 }, 500, pulsate); });
}
http://jsfiddle.net/alecstheone/zCUSK/
I only use jquery and jquerymobile... I noticed that if I disable jquerymobile in jsfiddle it works but I dont want this as I use jquerymobile in my application for other things...
Your code works fine but you've to make some changes to your script, As you're having a click event on the button but using jQuery mobile your button is wrapped around with span and divs(mainly because of jquery mobile css),
So you just have to traverse through that target div with .closest() to set your animation effect. Below is the small demo of your code with the desired effects.
$('#pulsate').on('click', function () {
pulsate(this); // Change here
});
function pulsate(element) {
$(element || this).closest("div.ui-btn").animate({
opacity: 0
}, 500, function () {
$(this).closest("div.ui-btn").animate({
opacity: 1
}, 500, pulsate);
});
}
Fiddle Example
Related
I have a menu with categories,
when I hover on a category a drop down show up
(I have already delayed the drop down to show up after 600 MS),
I want to know how to delay the hover event on the category too for 600 MS,
What is the best way and easiest way to achieve this using jquery?
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
});
I have made a bootply here http://www.bootply.com/lXioubaMre
You could use a basic CSS transition
.services-shortcut {
transition: all 0s .6s;
}
that runs immediately after a 600ms delay
Example: http://www.bootply.com/xppQzbvQ3P
If you choose to do this effect absolutely in javascript (but I wouldn't do it, just to keep off style from javascript) then apply the active class after a 600ms timeout, e.g.
jQuery('div.dropdown').hover(function() {
var $this = $(this);
setTimeout(function() {
$this.find('.services-shortcut').addClass('active');
}, 600);
$this.find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, ...
If you use this approach then you should also clear the interval onmouseout
You can use hoverIntent jQuery plugin, which triggers functions based on client mouse movement. In your case the script would be simple, you can take a look at this Bootply:
function showMenu(e) {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').show();
};
function hideMenu(e) {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').hide();
};
$("div.dropdown").hoverIntent({
over: showMenu,
out: hideMenu,
sensitivity: 3,
timeout: 800
});
$(".dropdown-menu a").hoverIntent({
over: function(){
$(this).addClass('active')
},
out: function(){
$(this).removeClass('active')
},
sensitivity: 3
});
I would use $.hoverDelay() plugin that does exactly that. It lets you configure the delay(s) for the 'in' and 'out' events like so:
$('div.dropdown').hoverDelay({
delayIn: 200,
delayOut:700,
handlerIn: function($element){
$element.css({backgroundColor: 'red'});
},
handlerOut: function($element){
$element.css({backgroundColor: 'auto'});
}
});
You can simply use jQuery.delay() method :
jQuery('div.dropdown').hover(function() {
alert("Action delayed");
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
}).delay(600);
.dropdown{
background-color:red;
]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
aaaa
</div>
That will wait for 600ms before executing your action, that's all you need.
I am using MooTools library. I want my fade in fade out effect on table id
<table id="myId"></table>
i have working click event
aNextCal.addEvent('click',function(){
//Click Event working here i want fade in fadeout code
this.showNextWeek();
}.bind(this));`
Please suggest
There is the default fade function to every element
document.id('myId').fade('out'); //hide
document.id('myId').fade('in'); //show
If you need something more complex to control the effect use Tween:
new Fx.Tween('myId', {
duration: 4000,
property: 'opacity',
onComplete: function(){
alert('hide');
}
}).start(0);
Mootools has a method fade, which is intended for fading elements in/out.
myElement.fade([how]);
how = ('in', 'out', 'show', 'hide', 'toggle', number)
Example of use:
// simple example
$('myId').fade('out');
// setting up element with options
$('myId').set( 'tween', {
duration: 400,
transition: 'quad:out'
});
$('myButton').addEvent('click', function(){
$('myId').fade( 'toggle' );
});
I'm creating a feature content slider using jQuery and I have hit a few snags trying to get rid of the last few bugs. It is inspired by http://kleientertainment.com/ so check it out and you'll see what im going for. Any suggestions on achieving this effect even with totally new code would be helpful!
The idea is a simple div swap, but with custom animations for each slide that fire when it is loaded. It also MUST fade to black in between each transition, whether autoplay or clicked.
lets get to the code and bugs:
$(document).ready(function () {
//START SLIDES HIDDEN
$('.slide').css({
'position': 'absolute',
'display': 'none'
});
//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();
//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
$('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {
if (slideNumber == 4) {
animation1_swap();
runSlideShow(1);
}
if (slideNumber == 3) {
animation4_swap();
runSlideShow(4);
}
if (slideNumber == 2) {
animation3_swap();
runSlideShow(3);
}
if (slideNumber == 1) {
animation2_swap();
runSlideShow(2);
}
});
//NAVIGATION BUTTONS
$('#bullet1').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation1_swap();
runSlideShow(1);
});
});
$('#bullet2').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation2_swap();
runSlideShow(2);
});
});
$('#bullet3').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation3_swap();
runSlideShow(3);
});
});
$('#bullet4').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation4_swap();
runSlideShow(4);
});
});
}
});
CSS info: .slide sets the dimensions, and #slideX are the individual background images for each. #bulletX are the nav buttons.
Also, the animationX_swap() are the animations specific to that slide. They live in another file and would have made this post way too long.
The bugs:
Right now, the autoplay function is great, you can watch it all day and not see a hiccup. The trouble comes when the nav buttons are used, particularly #bullet1. If i click #bullet1, then go to 2, then back to 1, the autoplay seems to be sped up as the slide fades out before it is supposed to. I am a total beginner but I made it this far, can anyone help me clean this up and essentially reimagine http://kleientertainment.com/ 's slider?
Just discovered jQuery cycle plugin http://malsup.com/jquery/cycle/ from another post.
I remade my slider with that and it preforms exactly as needed. Good stuff!
I'm working on a small bit of functionality for three similar tabbed items. Basically, when you hover over one, I want the opacity of the two siblings to go to 50%. I set up a pretty basic jQuery hover event, here's the page code...
<div id="footer">
Seek
Experience
Gain
</div>
...and the corresponding JS:
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },500);
},
function () {
$(this).siblings().animate({ opacity: 1 },500);
}
);
When you hover onto one everything works great, but when you hover from one to the other the siblings don't dim simultaneously. I did a quick screencast for reference. I'm sure there's a simple way to make it work properly, but I'm at a loss for it. Thanks in advance.
Screencast: http://dl.dropbox.com/u/1762184/example.mp4
You want to cancel any in process animations on the siblings. This is what the stop() function is for.
$('.footer-tabs').hover(
function () {
$(this).siblings().stop().animate({ opacity: .5 },500);
},
function () {
$(this).siblings().stop().animate({ opacity: 1 },500);
}
);
Try this :
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },"fast");
},
function () {
$(this).siblings().animate({ opacity: 1 },"fast");
}
);
I have a page that uses the jQuery.swfobject plugin to embed 5 flash items into a page and each flash item has a callback using externalInterface. The callbacks work when I have the js function outside of $(document).ready(function() but the jQuery animations do not fire - the ajax load however does.
Does anyone know how to get the animations working too, code below:
function pageLoader(galID) {
$('#menu').hide();
$('#holder_gallery').load("feeds.php", {gallery: galID}, function(){
$('#holder_gallery ul li a').slimbox();
$('#holder_gallery').jScrollPane();
$('.galleryTitle').text(galleryTitle);
$('.galleryTitle').fadeIn(2000);
$('#holder_gallery').fadeIn(2000);
$('.ghost').each(function() {
$(this).hover(function() {
$(this).stop().animate({ opacity: 1.0 }, 300);
},
function() {
$(this).stop().animate({ opacity: 0.5 }, 300);
});
});});}
The main parts above work well - I just want to add the gloss back in using the fadeIn functions and the animate on hovers. The jScrollpane reinstates itself as does the .load
Regards,
MM
What about binding the .ghost elements in the callback of the #holder_gallery animation
//existing code
$('#holder_gallery').fadeIn(2000, function(){
$('.ghost', this).each(function() {
$(this).hover(function() {
$(this).stop().animate({ opacity: 1.0 }, 300);
},
function() {
$(this).stop().animate({ opacity: 0.5 }, 300);
});
});
});