Solved

Jquery functions and variables

Posted on 2012-03-29
7
391 Views
Last Modified: 2012-04-08
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

0
Comment
Question by:Refael
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
7 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 37781079
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
 

Author Comment

by:Refael
ID: 37781091
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
 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 200 total points
ID: 37781155
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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 

Author Comment

by:Refael
ID: 37781283
Hi sonawanekiran, Thank you!

That's strange the fadeTo for the #standort-img works but the animation does not work.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 300 total points
ID: 37792973
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
 

Author Closing Comment

by:Refael
ID: 37821875
Thank you!
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question