Develop Reference

How to add a hover delay on a menu for a Volusion site?

First of all, I'm using Volusion. Here's my website: www.gtsimulators.com
So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:
I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.
Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.
I do have access to the main html, css and js files.
I will be glad to provide more information if needed.
Please help. Thanks!
UPDATE:
First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.
Just added this code into my CSS file and it worked perfectly:
.vnav__subnav, .overlay{
transition: opacity 0.2s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
transition-delay: .5s;
}
Again, thanks Adam for the prompt response.

Try something like this
(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)
<style>
a{
color:black;
transition:color 0s;
transition-delay:0;
}
a:hover{
color:red;
transition-delay:0.5s;
}
</style>
Well i wanted to show you generic usage.
You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)
<style>
.vnav__subnav, .overlay{
transition: opacity .5s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
}
</style>
This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)

how to make an image "coming" to foreground

My goal is to show an image and bring it slowly to the foreground (and extend it in the main time). I wish this can be done when I detect the event onmouseover on a div/img.
Currently, I use the hidden attribute but I dislike it because it's like: appear/vanish, without transitions.
I hope there were a solution with a CSS/CSS3 attribute which will do that. But I found none. I try something with the animate. but it hardly failed.
Do somebody know how to do such of thinqs? I'm using basic html/css/js but I can use bootstrap (if it has a good solution).
Thanks.

You can achieve this with CSS transition and transform. You could use the scale function. Here's something you can play around to get what you want:
http://jsfiddle.net/v2kHU/1/
img{
transition: all 1s;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
}
Edit:
If you want it to be hidden at the beginning then fade in and scale, you could play with the opacity:
http://jsfiddle.net/v2kHU/2/
img{
transition: all 2s;
opacity:0;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
opacity:1;
}

Overriding transition-delay issue on Firefox

I having issue to override transition-delay on firefox. Below example works as i expected in Chrome and IE but at Firefox, before animation it is delaying. I am not able to override transition-delay on firefox before animation starts. I believe this is a bug but what is workaround of this problem?
Here is jsfiddle link
Here is Html Codes
<button>move</button>
<div class="box"></div>
Javascript
$('button').click(function(){
$('.box').addClass('move').on('transitionend',function(){
$(this).removeClass('move');
});
});
And CSS
.box{
height:100px;
width:100px;
background-color:yellow;
transition:all 1s ease 1s;
position:absolute;
left:0;
}
.move{
transition-delay:0;
left:500px;
}

You just need to include a unit (seconds in this case):
.move {
transition-delay: 0s;
left: 500px;
}
Updated fiddle
This answer explains why: Units on "0s" Transition in Firefox

Doing a css3 transition with on click jquery event?

I have this css which does a slide out transition
.slide_animation {
transition: 10s;
left: 0px !important;
-webkit-transition-duration:800ms
}
and using jquery:
$(".shop_look").click(function(){
$("#look").show();
$("#look").addClass("slide_animation");
$(this).fadeOut(2000);
})
this works but there is no easing when the #look element shows, its too snappy, I want it to ease out like a smooth animation. thanks

It doesn't look like you're using that correctly, the display property has only two states, so you should probably use the opacity property instead (or both) :
#look {
opacity:0;
-webkit-transition-duration:800ms;
}
#look.slide_animation {
opacity:1;
}
FIDDLE
If you don't want transitions on everything, you can specify the property as well:
transition-property: opacity;

Jquery and IE8 animate opacity solution

I am trying to animate opacity with Jquery an it is working fine in every browser except, you guess it dreaded IE8! Problem: on animation I am seeing some ugly artifacts:(
I know that I can solve this by removing background and adding the same background color to my animated div and to my container div,but it is NOT an option in my case. Can somebody suggest solution to this?
My code:
$(document).ready(function() {
$(".img").animate({
opacity: 0
});
$(".glow").click(function() {
$(".img").animate({
opacity: 1
}, 5000);
});
});

By adding IE filters to my CSS I have partially solved this issue (much better now and no black halo).
Lost whole day with this so I hope it will help someone more fortunate than me:)
.img{
display:block;
width:230px;
height:300px;
owerflow:hidden;
position:relative;
outline:none;
/*Notice (ugly) IE filter here and Source to my PNG image */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.robertpeic.com/glow/glow.png) alpha(opacity=0);
background:none;
margin:0px auto;
padding-top:10px;
}

That's what you get when you change opacity of the images with alpha transparency in IE7 and IE8. There is another question about the same IE GIF/PNG Transparency issue with jQuery