[jQuery] Don't 'X' if already 'X'd'
Hey,
I'm trying to get a little hover script running. It's using the
hoverIntent plugin, but substituting that for hover will work for this
example.
What I'm trying to do is hover a link which will fade out a paragraph,
change the contents of that paragraph, and then fade that paragraph
back in. I have that working in my code so far.
The bug I'm trying to fix is that when I hover over the now active
link again, it repeats the fadeOut > change contents > fadeIn script
again, but as the content has already been changed it just becomes an
annoying fadeOut fadeIn effect.
Any help would be greatly appreciated.
Here's my code.
$('ul.sub-text-points li a.point-1').hover(function() {
$('a.point-2, a.point-3').removeClass("current_point");
$(this).addClass("current_point");
$('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
start of the problem? */
$(this).html('Changed text');
$(this).fadeIn(300);
});},
function() {
});
[jQuery] Re: Don't 'X' if already 'X'd'
Liam,
Thanks for your reply. As soon as I posted this I also had that idea.
Guess a Mr Kipling and a coffee is brain food after all!
I haven't tried your code as I have it working now. Here's my code
incase anyone else would like it. Cheers Liam.
$('ul.sub-text-points li a.point-1').hoverIntent(function() {
$('a.point-2, a.point-3').removeClass("current_point");
$(this).addClass("current_point");
$('p.point-1').fadeOut(300, function(){
$(this).html('Changed text');
$(this).fadeIn(300);
$(this).removeClass("point-1");
$(this).addClass("point-2");
$(this).addClass("point-3");
});},
function() {
});
On Jan 15, 3:41 pm, Liam Potter wrote:
> just noticed a mistake
> forget to actually do anything with the if
> try this
>
> $('ul.sub-text-points li a.point-1').hover(function() {
> if ( $(this).attr("class") == "current_point") { }
> else{
> $('a.point-2, a.point-3').removeClass("current_point");
> $(this).addClass("current_point");
> $('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
> start of the problem? */
> $(this).html('Changed text');
> $(this).fadeIn(300);
> });},
> function() {
>
> });
> }
> Liam Potter wrote:
> > here is some untested code
>
> > $('ul.sub-text-points li a.point-1').hover(function() {
> > if ( $(this).class("current_point") {}
> > else{
> > $('a.point-2, a.point-3').removeClass("current_point");
> > $(this).addClass("current_point");
> > $('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
> > start of the problem? */
> > $(this).html('Changed text');
> > $(this).fadeIn(300);
> > });},
> > function() {
> > });
> > }
>
> > like I say, untested, but should give you a starting point.
>
> > Liam Potter wrote:
> >> You could add a class say, "nochange" check for that on hover, if
> >> found, no dothing, if not, continue to change.
>
> >> davebowker wrote:
> >>> Hey,
>
> >>> I'm trying to get a little hover script running. It's using the
> >>> hoverIntent plugin, but substituting that for hover will work for this
> >>> example.
>
> >>> What I'm trying to do is hover a link which will fade out a paragraph,
> >>> change the contents of that paragraph, and then fade that paragraph
> >>> back in. I have that working in my code so far.
>
> >>> The bug I'm trying to fix is that when I hover over the now active
> >>> link again, it repeats the fadeOut > change contents > fadeIn script
> >>> again, but as the content has already been changed it just becomes an
> >>> annoying fadeOut fadeIn effect.
>
> >>> Any help would be greatly appreciated.
>
> >>> Here's my code.
>
> >>> $('ul.sub-text-points li a.point-1').hover(function() {
> >>> $('a.point-2, a.point-3').removeClass("current_point");
> >>> $(this).addClass("current_point");
> >>> $('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
> >>> start of the problem? */
> >>> $(this).html('Changed text');
> >>> $(this).fadeIn(300);
> >>> });},
> >>> function() {
> >>> });
[jQuery] Re: Don't 'X' if already 'X'd'
Chaining is a good idea!
I used your chain, but combined the addClass into a single line. eg
"addClass('point-2 point-3')"
Cheers again!
On Jan 15, 3:59 pm, Liam Potter wrote:
> That always happens to me as well, as soon as I post something I'll
> realise what I could do.
>
> But you can chain a quite a bit of this, make a bit more efficient
>
> $('ul.sub-text-points li a.point-1').hoverIntent(function() {
> $('a.point-2, a.point-3').removeClass("current_point");
> $(this).addClass("current_point");
> $('p.point-1').fadeOut(300, function(){
> $(this).html('Changed
> text').fadeIn(300).removeClass("point-1").addClass("point-2").addClass("point-3");
> });},
> function() {
>
> });
> davebowker wrote:
> > Liam,
>
> > Thanks for your reply. As soon as I posted this I also had that idea.
> > Guess a Mr Kipling and a coffee is brain food after all!
>
> > I haven't tried your code as I have it working now. Here's my code
> > incase anyone else would like it. Cheers Liam.
>
> > $('ul.sub-text-points li a.point-1').hoverIntent(function() {
> > $('a.point-2, a.point-3').removeClass("current_point");
> > $(this).addClass("current_point");
> > $('p.point-1').fadeOut(300, function(){
> > $(this).html('Changed text');
> > $(this).fadeIn(300);
> > $(this).removeClass("point-1");
> > $(this).addClass("point-2");
> > $(this).addClass("point-3");
> > });},
> > function() {
> > });
>
> > On Jan 15, 3:41 pm, Liam Potter wrote:
>
> >> just noticed a mistake
> >> forget to actually do anything with the if
> >> try this
>
> >> $('ul.sub-text-points li a.point-1').hover(function() {
> >> if ( $(this).attr("class") == "current_point") { }
> >> else{
> >> $('a.point-2, a.point-3').removeClass("current_point");
> >> $(this).addClass("current_point");
> >> $('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
> >> start of the problem? */
> >> $(this).html('Changed text');
> >> $(this).fadeIn(300);
> >> });},
> >> function() {
>
> >> });
> >> }
> >> Liam Potter wrote:
>
> >>> here is some untested code
>
> >>> $('ul.sub-text-points li a.point-1').hover(function() {
> >>> if ( $(this).class("current_point") {}
> >>> else{
> >>> $('a.point-2, a.point-3').removeClass("current_point");
> >>> $(this).addClass("current_point");
> >>> $('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
> >>> start of the problem? */
> >>> $(this).html('Changed text');
> >>> $(this).fadeIn(300);
> >>> });},
> >>> function() {
> >>> });
> >>> }
>
> >>> like I say, untested, but should give you a starting point.
>
> >>> Liam Potter wrote:
>
> >>>> You could add a class say, "nochange" check for that on hover, if
> >>>> found, no dothing, if not, continue to change.
>
> >>>> davebowker wrote:
>
> >>>>> Hey,
>
> >>>>> I'm trying to get a little hover script running. It's using the
> >>>>> hoverIntent plugin, but substituting that for hover will work for this
> >>>>> example.
>
> >>>>> What I'm trying to do is hover a link which will fade out a paragraph,
> >>>>> change the contents of that paragraph, and then fade that paragraph
> >>>>> back in. I have that working in my code so far.
>
> >>>>> The bug I'm trying to fix is that when I hover over the now active
> >>>>> link again, it repeats the fadeOut > change contents > fadeIn script
> >>>>> again, but as the content has already been changed it just becomes an
> >>>>> annoying fadeOut fadeIn effect.
>
> >>>>> Any help would be greatly appreciated.
>
> >>>>> Here's my code.
>
> >>>>> $('ul.sub-text-points li a.point-1').hover(function() {
> >>>>> $('a.point-2, a.point-3').removeClass("current_point");
> >>>>> $(this).addClass("current_point");
> >>>>> $('p.sub-text').fadeOut(300, function(){ /* Looks like this is the
> >>>>> start of the problem? */
> >>>>> $(this).html('Changed text');
> >>>>> $(this).fadeIn(300);
> >>>>> });},
> >>>>> function() {
> >>>>> });
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Bump!
Same problem here. Code looks fine?
$('#feature .sim-link').toggle(function () {
$('#feature').cycle('stop');
}, function() {
$('#feature').cycle('start');
});
Anyone have a solution?
Dave
On Apr 27, 8:04 am, Nic Hubbard wrote:
> Really? No one knows why the cycle pause is not working? Someone
> must be using this!
>
> On Apr 24, 8:25 am, Nic Hubbard wrote:
>
> > Anyone?
>
> > On Apr 23, 9:44 pm, Nic Hubbard wrote:
>
> > > Shawn,
>
> > > Yes, I havepauseon hover set, and this is correctly working. It is
> > > when the overlay comes up, and it is suppose topausethe current
> > > image, which, my code seems to be correct to do so $
> > > ('#artistCycleParent').cycle('pause'); but it just keeps cycling and
> > > does not honor thepause.
>
> > > I have it in my click function, and everything in the click function
> > > does work, but not thepause. Once the user clicks off of the
> > > overlay, it should resume.
>
> > > On Apr 23, 9:22 pm, Shawn wrote:
>
> > > >Pauseis working for me, with a catch.
>
> > > > If my mouse is not over the image, it cycles. Placing my mouse over the
> > > > image pauses the cycling.
>
> > > > Clicking the link brings up an overlay (?) and a form - at this point
> > > > the mouse is not "over" the image, but over the overlay/form. So the
> > > > image cycles as it should.
>
> > > > I don't think you want thepauseoption here. I think you want to
> > > > progamatically start/stop the cycling. See the section "Manually
> > > > Pausing a slideshow" athttp://malsup.com/jquery/cycle/int2.html.
>
> > > > HTH.
>
> > > > Shawn
>
> > > > Nic Hubbard wrote:
> > > > > I am using thecycleplugin, but for some reason I can't get thepause
> > > > > feature to work. I am showing a hidden div, and when I do, I need to
> > > > >pausethe slideshow.
> > > > > Here is what I am using:
>
> > > > > $('#artistCycleParent').cycle({
> > > > > fx: 'fade',
> > > > > speed: 3000,
> > > > > timeout: 5000,
> > > > > pause: 1,
> > > > > next: '#artworkNext',
> > > > > prev: '#artworkPrev'
> > > > > });
>
> > > > > //Pausethecycle
> > > > > $('#pauseButton').click(function() {
> > > > > $('#artistCycleParent').cycle('pause');
> > > > > $(this).hide();
> > > > > $('#resumeButton').show();
> > > > > return false;
> > > > > });
>
> > > > > // Resume thecycle
> > > > > $('#resumeButton').click(function() {
> > > > > $('#artistCycleParent').cycle('resume');
> > > > > $(this).hide();
> > > > > $('#pauseButton').show();
> > > > > return false;
> > > > > });
>
> > > > > The code looks ok to me, but it just does not seem topause.
>
> > > > > Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
> > > > > Click on "Contact about artwork"
>
> > > > > Thanks.
[jQuery] Hover In/Out with quick mouse movements
So I have this bug...
I have an initial div set to hide on document init, and fadeIn when I
hover over the parent div, then fadeOut when I hover back out of the
parent div.
When I move the mouse fast in and out of the parent div, the child div
seems to queue up the movements so after I stop moving the mouse, the
fadeIn and fadeOut effects keep running until they have caught up with
the mouse movements. Any ideas how to fix this? Still getting my head
around jQuery and javascript, so any help would be greatly
appreciated.
Here's my code:
$(document).ready(function() {
$('.prev, .next').hide();
$('#topbar').hover(function() {
$('.prev, .next').fadeIn('slow');
},
function() {
$('.prev, .next').fadeOut('slow');
});
});
[jQuery] Hover In/Out with quick mouse movements
So I have this bug...
I have an initial div set to hide on document init, and fadeIn when I
hover over the parent div, then fadeOut when I hover back out of the
parent div.
When I move the mouse fast in and out of the parent div, the child div
seems to queue up the movements so after I stop moving the mouse, the
fadeIn and fadeOut effects keep running until they have caught up with
the mouse movements. Any ideas how to fix this? Still getting my head
around jQuery and javascript, so any help would be greatly
appreciated.
Here's my code:
$(document).ready(function() {
$('.prev, .next').hide();
$('#topbar').hover(function() {
$('.prev, .next').fadeIn('slow');
},
function() {
$('.prev, .next').fadeOut('slow');
});
});
[jQuery] Re: Hover In/Out with quick mouse movements
Thanks for the reply.
Looks a bit like overkill tbh, and I did quickly try it but couldn't
make it work.
What I have now is --
$(document).ready(function() {
$('.ticker-prev, .ticker-next').hide();
$('#topbar').hover(function() {
$('.ticker-prev,
.ticker-next').fadeIn(500);
},
function() {
$('.ticker-prev,
.ticker-next').fadeTo(2000, 1).fadeOut(500);
});
});
Which when I mouseout delays the fadeout effect by 2 seconds by
fooling the already faded in element to fade in some more, ie. do
nothing, before fading out.
What I'd like to be able to do still though is to cancel the quesue of
mousein/out effects, and also if a user mousein then out then in again
before the 2 second wait then the mouseout effect in the middle should
not run.
Hope someone can understand this little problem and help out.
Cheers!
[jQuery] Re: Hover In/Out with quick mouse movements
Taking a look now. Cheers for the suggestion. On Oct 15, 5:51 pm, "Martin Möller" <[EMAIL PROTECTED]> wrote: > davebowker wrote: > > Which when I mouseout delays the fadeout effect by 2 seconds by > > fooling the already faded in element to fade in some more, ie. do > > nothing, before fading out. > > Maybe hoverIntent is what you are looking for: > > http://plugins.jquery.com/project/hoverIntent > > Cheers Mate
[jQuery] Cycle Plugin Typewriter effect
Hey, The cycle plugin is fantastic. I love using it, but would like to know if there's a typewriter effect for the transitions in order to build a news ticker using it. See here for typewriter effect: http://www.hungry-media.com/code/jQuery/tickerType/ Or, would anyone know how to create an effect like this for use with the cycle plugin? Thanks, Dave
