JQuery Tidy Up Code [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

Want to improve this question? Because this question may lead to opinionated discussion, debate, and answers, it has been closed. You may edit the question if you feel you can improve it so that it requires answers that include facts and citations or a detailed explanation of the proposed solution. If edited, the question will be reviewed and might be reopened.

Closed 12 months ago.

Improve this question

Am using a bit of javascript to animate an a class within a div class.

$(".previouscontainer").mouseenter(function(){
    $("a.previousarrow").animate({left:'0px'},"fast");
  });
$(".previouscontainer").mouseleave(function(){
    $("a.previousarrow").animate({left:'10px'},"fast");
  });
$(".nextcontainer").mouseenter(function(){
    $("a.nextarrow").animate({right:'0px'},"fast");
  });
$(".nextcontainer").mouseleave(function(){
    $("a.nextarrow").animate({right:'10px'},"fast");
  });

Was wondering whether there is a better/cleaner way to write this?

Just thought that a.nextarrow might be a child element of .nextcontainer and that $(this).find("a.nextarrow") could be useful... never mind. — Stefan
– Stefan, Commented Jan 11, 2013 at 8:04
@Stefan yes that's a good point. $(this).find("a.nextarrow") is not much quicker than $("a.nextarrow") but if it was a case of $(this).find('a') that would be tidier at least — Popnoodles
– Popnoodles, Commented Jan 11, 2013 at 8:05

dumbass · Accepted Answer · 2024-12-21 14:09:50Z

1

You can chain them.

$(".previouscontainer").mouseenter(function(){
    $("a.previousarrow").animate({left:'0px'},"fast");
  }).mouseleave(function(){
    $("a.previousarrow").animate({left:'10px'},"fast");
  });
$(".nextcontainer").mouseenter(function(){
    $("a.nextarrow").animate({right:'0px'},"fast");
  }).mouseleave(function(){
    $("a.nextarrow").animate({right:'10px'},"fast");
  });

or use hover which takes both functions

$(".previouscontainer").hover(function(){
    $("a.previousarrow").animate({left:'0px'},"fast");
  },function(){
    $("a.previousarrow").animate({left:'10px'},"fast");
  });
$(".nextcontainer").hover(function(){
    $("a.nextarrow").animate({right:'0px'},"fast");
  },function(){
    $("a.nextarrow").animate({right:'10px'},"fast");
  });

Or you can go mad and create your own event

$("a.previousarrow").on('moveme', function(){
    if ($(this).css('left')>0) $(this).animate({left:'0px'},"fast");
    else $(this).animate({left:'10px'},"fast");
});

if you need to bind it to various actions that can't be in the same selector

$(".previouscontainer").on('mouseover mouseleave', function(){ 
    $("a.previousarrow").trigger('moveme');
});

$('#somethingelse').on('click', function(){
    $("a.previousarrow").trigger('moveme');
});

There are other ways to swing this cat. .hover() is the most sensible.

edited Dec 21, 2024 at 14:09

dumbass

27.2k4 gold badges42 silver badges77 bronze badges

answered Jan 11, 2013 at 7:48

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Highway of Life Over a year ago

May I suggest an improvement to this answer: Consider "caching" the selectors to reduce load.

Popnoodles Over a year ago

i'm not sure it would help

Collectives™ on Stack Overflow

JQuery Tidy Up Code [closed]

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related