Im having an issue where jquery mouseover and mouseout do not work with the css function..
I am trying to have transition effects for buttons on an image slider.
My HTML Code:
<div id="hero">
<div id="next">
<img class="nxt" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/next.png"/>
</div>
<!--END--Next-->
<div id="prev">
<img class="prv" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/prev.png"/>
</div>
<!--END--Prev-->
<div id="slider">
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide1.png"/>
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide2.png"/>
<img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide3.png"/>
</div>
<!--END--Slider-->
</div>
<!--END--Hero-->
My CSS Code:
#hero {
width: 944px; height: 360px;
position: relative;
margin: auto;
}
#slider {
width: 944px; height: 360px;
position: absolute;
overflow: hidden;
}
#next {
position: absolute;
top: 250px;
right: 15px;
z-index: 99;
cursor: pointer;
opacity: 0.3;
}
#prev {
position: absolute;
top: 250px;
left: 15px;
z-index: 99;
cursor: pointer;
opacity: 0.3;
}
and finally my JS Code:
$(function () {
$("#hero").mouseover(function () {
$this = $(this);
$this.find("#next").css(
"transition":"all 0.2s ease-in",
"opacity":"1"
);
}).mouseout(function () {
$this = $(this);
$this.find("#next").css(
"transition":"all 0.2s ease-out",
"opacity":"0.3"
);
});
});
Please bare in mind i am new to javascript and jquery so any help is much appreciated.
Try mouseleave function.
$(function(){
$("#hero").mouseover(function () {
$this = $(this);
$this.find("#next").css({
"transition":"all 0.2s ease-in",
"opacity":"1"
});
}).mouseleave(function () {
$this = $(this);
$this.find("#next").css({
"transition":"all 0.2s ease-out",
"opacity":"0.3"
});
});
});
I've put your code in a Fiddle. This won't work.
Then I cleaned it up a bit and got rid of some syntax errors here and voila: it works.
Note: If you're only going to change the opacity, you better do it with just CSS:
#next{
opacity: 0.3;
transition: all 0.2s;
transition-timing-function: ease-out;
}
#hero:hover #next{
opacity: 1;
transition-timing-function: ease-in;
}
/*DON'T FORGET TO PREFIX THE TRANSITION-ATTRIBUTES*/
Related
I'm working on flexslider here onClick next I want to add class it is working but randomly click is coming when I first click class added then on second click not coming third click coming so on. I want to add a class every click. Here might be the problem in if()
$('.flex-next').on('click', function() {
if ($('.timeline span').hasClass('clicked')) {
$('.timeline span.clicked').removeClass('clicked');
$(this).addClass('clicked');
} else {
$('.timeline span').removeClass('clicked');
$('.timeline span').addClass('clicked');
}
});
.timeline {
content: '';
background-color: rgba(255, 255, 255, 0.52);
display: block;
width: 100px;
height: 2px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
}
.timeline span:before {
position: absolute;
left: 0;
top: -1px;
content: '';
background-color: red;
display: block;
height: 3px;
animation: yourAnimation 1s 0s linear;
}
.timeline span.clicked {
position: absolute;
left: 0;
top: -1px;
content: '';
background-color: blue;
display: block;
height: 3px;
animation: yourAnimation 1s 0s linear;
}
#keyframes yourAnimation {
0% {
width: 0;
}
50% {
width: 50%;
}
82% {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-next">Click here</div>
<span class="timeline">
<span></span>
</span>
You can acheive the required functionality as
$('.flex-next').on('click', function(){
if (! ($('.timeline span').hasClass('clicked')) ) {
$('.timeline span').addClass('clicked');
setTimeOut(function(){
$('.timeline span').removeClass('clicked');
} , 200)
}
});
To add/remove a class on click, it is better to use jquery toggleClass function.
Moreover you may need to execute the click event after the document is loaded correctly
$( document ).ready(function() {
$('.flex-next').on('click', function(){
$('.timeline span').toggleClass( "clicked" );
});
});
For more info, you may refer to: http://api.jquery.com/toggleclass/
Good day, I have this setup:
<div class="container">
<div class="project">
<img>
</div>
<div class="project">
<img>
</div>
<div class="project">
<img>
</div>
...
</div>
I have a list of projects and their thumbnails. When a user hovers on one of the projects all the remaining projects' thumbnails must become semi-transparent.
.custom_container {
width: 80%;
margin: 0 auto;
text-align: center;
}
.project {
display: inline-block;
width: 300px;
margin: 20px;
margin-top: 0px;
margin-bottom: 40px;
p, h4 {
text-align: left;
}
img {
width: 100%;
}
transition: all 0.2s ease-in-out;
}
Like this?
.project img {
opacity: .5;
}
.project:hover img {
opacity: 1;
}
EDIT
Based on your comment, you need jQuery for that.
$('.project').on('mouseover', function() {
$(this).siblings().find('img').css('opacity', '.5');
}).on('mouseout', function() {
$('.project img').css('opacity', '1');
});
DEMO
You can achive this by jQuery . Something like this
$(".project").hover(
function(){
$( ".project" ).not( this ).css( "opacity", "0.5" );},
function(){
$( ".project" ).css( "opacity", "1" );
});
.project > img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.project > img:hover{
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Would this CSS work?
http://www.w3schools.com/css/css_image_transparency.asp
Update after clarification:
<script type="text/javascript">
$('.project > img').on('hover', function(){
$('.project > img').not(this).css({ opacity: 0.5 });
}, function(){
$('.project > img').css({ opacity: 1 });
});
</script>
Going on your comments above this is what you want...
.project img {
opacity: 1;
transition: all ease .2s;
}
.project:hover img {
opacity: 0;
}
Fiddle here http://jsfiddle.net/1y8e7699/
1) I created an image with an opacity of 1. When you hover over it, the opacity becomes .3 and a button appears over the image. The problem, is that when you hover over the button, the opacity of the image returns to 1. How can I make the opacity of the image stay .3 when the hover is both over the image OR the button?
2) When you click play, the original image changes to a new image. But since the mouse is over the image, the new image has an opacity .3. How can I set the new image to have an opacity of 1 even when its hovered?
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
Here's a fiddle
Here's the answer to both of your questions.
Put the hover on the parent:
.show-image:hover img
Add the "hide" class on the parent and change the opacity that way.
$(this).parent().addClass("hide");
div.show-image.hide img{
opacity: 1;
}
To add the play button back on hover after clicking the first time you would have to remove the hide class from the parent in your mouse out function:
$('.the-buttons').parent().removeClass("hide");
change your css
from this:
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
to this:
div.show-image:hover img {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
Hope this helps. Full snippet:
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image:hover img {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
I removed your opacity from the CSS, and placed it within your jQuery function. I also replaced your event handler with .hover(), and targeted the parent container.
$('.show-image').hover(
function() {
$(this)
.find('img').css('opacity', '.3').end()
.find('input').show();
}, function() {
$(this)
.find('img').css('opacity', '1').attr("src", originalImgSrc).end()
.find('input').hide();
}
);
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif").css('opacity', 1);
$(this).hide();
});
$('.show-image').hover(
function() {
$(this)
.find('img').css('opacity', '.3').end()
.find('input').show();
},
function() {
$(this)
.find('img').css('opacity', '1').attr("src", originalImgSrc).end()
.find('input').hide();
}
);
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
background: white;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
Also, note the update I made to restore opacity on clicking 'Play'.
You can use mouseover/mouseout events to add/remove class and add css to that class, I added the .hovered class.
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
function addHOVER() {
$('.show-image img').addClass("hovered");
}
function remHOVER() {
$('.show-image img').removeClass("hovered");
}
$(".show-image img").mouseover(addHOVER);
$(".show-image .the-buttons").mouseover(addHOVER);
$(".show-image .the-buttons").mouseout(remHOVER);
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
remHOVER();
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img.hovered {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
I would like to slide a video in from the left on click of a button and auto play at the same time. In my jsfiddle I've used a youtube video but in my site I will be using HTML5 video.
I've tried using the following code but the video comes up with an error when it should be auto playing. I want the video to then pause when it slides back out on click.
So slide in from left- play, slide out to left - pause.
HTML
<div class="wrapper">
<div class="content-wrapper"
Play Video
</div>
<div class="full-video">
<iframe id="video" src="//www.youtube.com/embed/vIu85WQTPRc" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 400px;
position: absolute;
overflow: hidden;
margin: 0;
padding:0;
z-index: 1;
}
.content-wrapper {
position: absolute;
z-index: 999;
background: red;
bottom: -90px;
width: 100%;
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
transition: bottom 1s;
}
#play-video {
position: absolute;
background-color: blue;
z-index: 999;
cursor: pointer;
}
.full-video {
position: absolute;
left: -600px;
z-index: 1;
width: 100%;
height: 100%;
-webkit-transition: left 1s;
-moz-transition: left 1s;
transition: left 1s;
}
.full-video iframe {
width: 100%;
height: 100%;
}
JS
var clicked=false;
$("#play-video").on('click', function(){
if(clicked)
{
clicked=false;
$(".full-video").css({"left": "-600px"});
$("#video")[0].src += "&autoplay=1";
ev.preventDefault();
}
else
{
clicked=true;
$(".full-video").css({"left": "0"});
$("#video")[0].src += "&autoplay=0";
ev.preventDefault();
}
});
Here are some jsfiddle's
Just slide in … http://jsfiddle.net/8ZFMJ/58/
Slide in and code from above… http://jsfiddle.net/8ZFMJ/59/
Any help would be appreciated.
Demo Fiddle
You werent using a correctly formed querystring, you were starting it with an ampersand (&) not a ?, in addition, you were setting autoplay=0/1 the wrong way around.
Updated jQuery:
var clicked=false;
var src=$("#video")[0].src;
$("#play-video").on('click', function(){
if(clicked)
{
clicked=false;
$(".full-video").css({"left": "-600px"});
$("#video")[0].src = src;
ev.preventDefault();
}
else
{
clicked=true;
$(".full-video").css({"left": "0"});
$("#video")[0].src = src+"?autoplay=1";
ev.preventDefault();
}
});
I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.
I have my overlay image stacked ontop of my main image, and it's set to "display: none;".
I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".main").mouseenter(function() {
jQuery(".overlay").fadeIn();
});
jQuery(".main").mouseleave(function() {
jQuery(".overlay").fadeOut();
});
});
</script>
and my HTML code:
<style type="text/css">
<!--
.hoverbox { position: relative; }
.main { width: 243px; height: 117px; }
.overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>
<!-- button 1 -->
<div class="hoverbox" style="float: left; width: 243px; height: 117px;">
<a href="/locations/sacramento-international-airport/">
<img class="main" src="/images/home-button-smf_orig.jpg" />
<img class="overlay" src="/images/home-button-smf_rollover.jpg" />
</a>
</div>
<!-- end button 1 -->
Try this instead:
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
I think hovering over the image itself was a bad idea, here I use the parent container. Also, using the on() method is now the preferred way to trigger mouse enter and leave events.
Good luck!
Michael's answer is a good one and will work, but it may be preferable to use CSS transitions for the animation and reserve jQuery for the behavior.
Here's a demo.
JavaScript
$(".hoverbox")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
CSS
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-transition: .4s;
}
.hoverbox.on .overlay {
opacity: 1;
}
Here's a demo of the former approach (similar to Michael's answer). Also, your CSS has been cleaned up for both examples.
css is enough in this case, try the below code
.main:hover + .overlay{ display:block; }
and make sure overlay has a higher z-index
.overlay {
position: absolute; width: 243px; height: 117px;
top: 0; left: 0; display: none; z-index: 2;
}
http://jsfiddle.net/Grhqn/1/
for graceful fading
.overlay {
position: absolute; width: 243px; height: 117px; top: 0;
left: 0; z-index: 2; transition: opacity 1.5s ease; opacity:0;
}
.overlay:hover { opacity:1; }
http://jsfiddle.net/Grhqn/3/