Jquery functions and variables

Hello Experts,

I am trying to learn how to write functions in Jquery in order to write less (lines of codes).
For example,  this code below:

#places-1 - I have 15    e.g. #places-1, #places-2 #places-3 ....... #places-15
#mb-1 - I also have 15 e.g. #mb-2, #mb-2, #mb-3 ....... #mb-15

Here is a code below i can write for each a block (15 blocks) or i can finally learn how to use variables and functions?

Can you please show me using this example so i can learn?

$('#places-1').mouseenter(function(){

		$('#standort-img').stop().fadeTo(300, 0.7);
		$('#mb-1').addClass('mb-zindex');
		$('#mb-1').stop().animate({width: 32, height: 32, paddingBottom:4}, 400);		
		
		}).mouseleave(function() {
		$('#mb-1').stop().animate({width: 17, height: 16, paddingBottom:0}, 400);
		$('#mb-1').removeClass('mb-zindex');
		$('#standort-img').stop().fadeTo(300, 1.0);
		});

Open in new window

RefaelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kiran SonawaneProject LeadCommented:
U can do this couple of ways...


1) Using ID
  $('#places-1, #places-2, #places-3').mouseenter(function(){
  //Your code
});

2) Using class

Add the class  to all places then your code will be
$('.placeClass').mouseenter(function(){
  //Your code
});

where placeClass is css class name for your places

like

<div id="places-1" class="placeClass">
0
RefaelAuthor Commented:
Hi sonawanekiran

I think you misunderstood the question?
I cannot have all the #places-1 in one the mouseenter function as each deals with a different #mb-1. Look above!
0
Kiran SonawaneProject LeadCommented:
Sorry for the same. You can try something like this


 for (var i=1; i<= 15;i++)
 {
   
   $('#places-' + i).mouseenter(function(){
     
   $('#standort-img').stop().fadeTo(300, 0.7);
    $('#mb-' + i).addClass('mb-zindex');
    $('#mb-' + i).stop().animate({width: 32, height: 32, paddingBottom:4}, 400);  
   
    }).mouseleave(function() {
    $('#mb-' + i).stop().animate({width: 17, height: 16, paddingBottom:0}, 400);
    $('#mb-' + i).removeClass('mb-zindex');
    $('#standort-img').stop().fadeTo(300, 1.0);
  });
 
 
   
 }
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RefaelAuthor Commented:
Hi sonawanekiran, Thank you!

That's strange the fadeTo for the #standort-img works but the animation does not work.
0
Michel PlungjanIT ExpertCommented:
1) use hover
2) give places a class and add the function to th class
3) get the id of the corresponding MB from the id of the places
 
var mb = $("#mb"+ $(this).attr("id").replace("places",""));

and
4) chain the event

$('.places').hover(function() {
  $('#standort-img').stop().fadeTo(300, 0.7);
  var mb = $("#mb"+ $(this).attr("id").replace("places",""));
  mb.addClass('mb-zindex').stop().animate({width: 32, height: 32, paddingBottom:4}, 400);
}            
,function (){
  $('#standort-img').stop().fadeTo(300, 1.0);
  var mb = $("#mb"+ $(this).attr("id").replace("places",""));
  mb.removeClass('mb-zindex').stop().animate({width: 17, height: 16, paddingBottom:0}, 400);
});
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
Thank you!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.