sugafree Posted December 22, 2014 Share Posted December 22, 2014 (edited) 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 December 22, 2014 by sugafree Link to comment Share on other sites More sharing options...
Ingolme Posted December 22, 2014 Share Posted December 22, 2014 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 More sharing options...
sugafree Posted December 22, 2014 Author Share Posted December 22, 2014 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 More sharing options...
Ingolme Posted December 22, 2014 Share Posted December 22, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now