Jump to content

css transition + jQuery Issue


robinandersen
 Share

Recommended Posts

Hello! I'm new here and I am dealing with a little problem which I hope you guys can help me with! What I want to achieve: Basically what I want to happen is that when the logo gets hovered the black message box will fade in using css transitions. Take a look at the image below and you will get me. And when the mouse moves away from the logo the message box fades out to zero again. But something is wrong, I dont know what. https://docs.google.com/file/d/0B0ONzhkyFUwhQXNOTFJzb0lVSFE/edit?pli=1 <-- image to make you understand. What I am dealing with: Thanks for staying with me, here is my HTML, CSS AND jQuery HTML:

<div id="colume">    <div id="logo-to-hover"><a href="#"><img src="images/villave-logo.png" alt="villave-logo" width="220" height="53" /></a>   </div> <!-- end logo-to-hover--> </div> <!-- end colume-->   <div id="message">     <div id="box-1" class><p>Byggvareforhandler</p>   </div> <!-- end box1 -->    </div><!-- end message-->

jQuery:

<script>$(function() {  $( "#logo-to-hover" ).hover(function() {   $( "#box-1" ).toggleClass( "box-a");   return false;  });}); </script>

CSS:

 #logo-to-hover { width: 220px; height: 55px; margin-right: 20px; float: left; } #boxes { width: 940px; height: 71px; margin-left: auto; margin-right: auto; position: absolute; } #box-1 { height: 44px; width: 200px; margin-left: 10px; margin-right: 10px; background-image: url(../images/hoverbg.png); float: left; text-align: center; opacity: 0; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;  }.box-a { opacity: 1; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; }

Edited by robinandersen
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
 Share

×
×
  • Create New...