Saturday 15 June 2013

javascript - What is the correct syntax for this? -


I am trying to fade the images at the top of an existing image when I do not overwrite the mouse over them Lets function for each image.

I currently have:

  & lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {$ ('picture'). Mousecenter (function () {// fade in hover image $ $ (this.getAttribute ("name").) FadeIn (500);} ); $ ('.hovarimage') .mousewat (function () {// fade out hover image $ (this). FadeOut (500);});}); & Lt; / Script & gt; ... ... & lt ;! - Base picture - & gt; & Lt; Img src = "image1.png" square = "picture" name = "hoverimage1" & gt; & Lt; Img src = "image2.png" square = "image" name = "hoverimage2" & gt; & Lt; Img src = "image3.png" square = "image" name = "hoverimage3"> & Lt ;! - When the hover over the image appears - & gt; & Lt; Img src = "image1_glow.png" square = "hoverimage" id = "hoverimage1" & gt; & Lt; Img src = "image2_glow.png" square = "hoverimage" id = "hoverimage2" & gt; & Lt; Img src = "image3_glow.png" square = "hoverimage" id = "hoverimage3" & gt;   

Assume that CSS is already present so that the hover image is placed above the original image. What my code tries to do:

  • When the mouse enters "image1.png" it will get the name "Hooverime 1" name attribute
  • Then it's a Element with ID "Hoverime 1" by executing original $ ('# Hoverime 1') Fadein (500);

    But the problem name attribute does not contain "#", and I do not want to type "name =" # hoverimage1 "because it is confusing for ID. Now my function is $ (' 1). 'Fadein (500); which is not the correct syntax. Can anyone help me with this? What is "$" (This.getAttribute ())? anything else?

    If you have a # , then you can just add the wire: < / P>

      $ ('#' + this.name)   

    But I would use it if possible, element index for:

      $ ('Picture'). Mousecenter (function () ($ ('.other_imes'). Eq ($ (this) .index ()) .stop (). Feedin (500);}). Mouseout (function () {$ ('. Other_size'). Eq ($ (this) .index ()). Stop (). FadeOut (500);});   

    In this way, you do not need to type the properties of the original image in the id of the second image in name .

    No comments:

    Post a Comment