Jump to content

0 opacity in css and what to use jquery mouseenter to change opacity and size

Recommended Posts

I want to create a div and set the opacity to 0 with css(background, color, border) so completely invisible and the whole thing will only work if js enabled. There is another div next to it, and want to use jquery to change the opacity to 1 and change it size. If possible with fadeIN fadeOut.

So far i didnt get far, still couldnt even change the opacity, although a researched it.

Also I tried mouseenter and mouseover, but no luck yet

or to use .hover to create a new div and everyting, but than I need the rest of the page to stay where it is and a new div would change it..

Edited by sugafree
Link to post
Share on other sites

When changing CSS properties, the values have to go between quotation marks like this:

$("#wdShow").css({ color : "rgba(0,0,0,1.0)" });

jQuery's hover() method takes two parameters: The function to run when the mouse gets over the element and the function to run when the mouse leaves the element.

You can use the .animate() method to make it change smoothly.

$(".element").hover(    function() {        $(".target").animate({ opacity : "1" });    },    function() {        $(".target").animate({ opacity : "0" });    });

To change its size, just determine what width and height you want to change it to and add that to the animate properties:

$(".target").animate({    opacity : "1",    width: "800px",    height: "500px"});
Link to post
Share on other sites

Thank you Foxy, best solution so far. However I still have 2 more major problems. Element and target is in the same wrapper div so when target is resized, it will force the element to a different position which really not looks good and how could I change the delay so the animation looks a bit slower?

Link to post
Share on other sites

I don't know how your page is laid out, that's a CSS problem, not a Javascript problem. In order to fix that we need to know your HTML structure and all the CSS rules that are affecting it.


You can use the second parameter of the animate() function to determine how many milliseconds it takes:

$(".target").animate({    opacity : "0"}, 3000); // Duration: 3000 milliseconds (3 seconds)
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...