Jump to content

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


sugafree

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..

$(document).ready(function(){$("#showCaseWD").hover(function(){$("#wdShow").css({color:rgba(0,0,0,1.0)});});});
Edited by sugafree
Link to comment
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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...