I am trying to make the element .circle1 move back and forth with CSS transform from mouse hover on the "ring" element using jQuery. However, this is not working and would like some insight on what my error is.
$("#ring").on({
mouseenter: function() {
$(.circle1).css({
"transform": "translateY(1000px)"
});
},
mouseleave: function() {
$(.circle1).css({
"transform": "translateY(0px)"
});
}
});
#ring {
background-size: contain;
width: 50px;
position: relative;
top: 5px;
}
.circle1 {
width: 80px;
height: 80px;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>
<img id="ring" src="New Assets/ring5.png" alt="">
</a>
<div class="circle1">
<li class="products">Products
</li>
</div>
Selector is not properly used for circle.
$("#ring").on({
mouseenter: function () {
$(".circle1").css({"transform":"translateY(1000px)"});
},
mouseleave: function () {
$(".circle1").css({"transform":"translateY(0px)"});
}
});
Related
I am trying to create a simple slider with jQuery.
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
The problem is when I click on the bottom with the class next, it only slides once and the second click doesn't work.
How can I fix this?
https://jsfiddle.net/6t1wx95f/
Simple, with $('li').animate({'left': '-=400px'}, 300); for next.
$('.next').on('click', function() {
$('li').animate({'left': '-=400px'}, 300);
});
$('.back').on('click', function() {
if(parseInt($('li').css('left')) <= 0){
if(parseInt($('li').css('left')) >= -400){
$('li').animate({'left': "0"}, 300);
} else {
$('li').animate({'left': '+=400px'}, 300);
}
}
});
.slider {
overflow: hidden;
width: 500%;
}
.slider ul {
width: 500%;
}
.slider ul li {
float: left;
list-style: none;
position: relative;
transition: all 0.65s;
}
.next,
.back {
width: 100px;
padding: 5px;
text-align: center;
background-color: skyblue;
float: left;
margin: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<ul>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
</li>
<li>
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
</li>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
</li>
<li>
<img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
</li>
<li>
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</li>
</ul>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
Your code just adds a single left: and right: style to the element. It doesn't remove/reset these values so it only ever does anything n first click:
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
What you need to do is only animate either the left or the right (by using positive and negative values), not both, e.g.
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'right': 0}, 300);
});
Of course this won't make the thing work entirely (you'll need to increment/decrement the amount you're moving by if you want to animate each slide) but hopefully it points you in the right direction.
I am trying to achieve an effect of looping through images if a div is hovered or not.
If mouseenter div then cycle through images
if mouseleave div then stop cycling through images and remove all images (only background image will be visible).
currently I am using a setTimeout to fire itself recursively but I am having trouble with jquery on detecting if the mouse is hovering or left the object.
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
});
Here is a codepen for reference: http://codepen.io/H0BB5/pen/xEpqbv
A similar effect I am trying to achieve can be seen when hovering the cargo logo on this website: http://cargocollective.com/
You just need to clear the timer on mouseleave.
var timer = null;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
timer = setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
}).mouseleave(function(){
clearTimeout(timer);
});
Here's a codepen: http://codepen.io/anon/pen/rrpwYJ
I would use an interval, and the JQuery .hover() functionality. Simply replacing your $(".one-box").mouseenter() with this will run the loop while you're hovered and remove it once your mouse leaves the area.
The important bit:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
Full example:
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
// New code:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
.one-box {
position: relative;
height: 300px;
width: 300px;
}
.one-box a {
width: 100%;
}
.one-box a img {
max-width: 100%;
}
/* .social_img { display: none; } */
a#social_logo {
background-image: url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
background-repeat: no-repeat;
background-position: 0 0;
display: block;
position: absolute;
width: 73px;
height: 73px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.one_box .social_gallery {
position: absolute;
left: 0;
top: 0;
opacity: 1;
display: none;
}
.nav_logo .social_gallery .social_img {
position: absolute;
float: none;
margin: 0;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-box nav_logo">
<a id="social_logo" href="#" alt=""></a>
<div class="social_gallery img_wall gallery">
<div class="social_img wall_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=222&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=777&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
</div>
<div>
Basically I have 4 images and when I click on one, information about that image should pop up with info about it.
How could I achieve that with jquery? Do I use jQuery for it?
Could someone direct me with some examples I could follow?
Thanks all
What you want is a popup when clicking ? See how to use JQuery with the click event, that's it. Something like
$( "#IdPicture" ).click(function() {
alert( "Here are the different information about the picture" );
});
You can also add an onClick event to the picture using JS.
You can also use CSS using #IdPicture:active
You choose
Seems like you're looking for something like fancybox. Its quite easy to use. Just browse through the link I provided, in my opinion the examples are quite straight forward. There is also a release based on jQuery.
I've created a JSFiddle
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#popup'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
Please have a look, this will help you.
You can do it on hover too
$(document).ready(function() {
$('#box1').hover(function() {
$('#info1').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info1').stop().animate({
opacity: 0
}, 300);
});
$('#box2').hover(function() {
$('#info2').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info2').stop().animate({
opacity: 0
}, 300);
});
$('#box3').hover(function() {
$('#info3').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info3').stop().animate({
opacity: 0
}, 300);
});
$('#box4').hover(function() {
$('#info4').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info4').stop().animate({
opacity: 0
}, 300);
});
});
#box1 {
width: 150px;
height: 150px;
background: blue;
}
#box2 {
width: 150px;
height: 150px;
background: red;
}
#box3 {
width: 150px;
height: 150px;
background: green;
}
#box4 {
width: 150px;
height: 150px;
background: orange;
}
#info1 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info2 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info3 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info4 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="box1">
<div id="info1">
<p>
<ul>
<li>cool info</li>
<li>even cooler info</li>
<li>too cool for school info</li>
</ul>
</p>
</div>
</div>
<div id="box2">
<div id="info2">
<p>
<ul>
<li>balblabala</li>
<li>this is interesting</li>
<li>of course it is</li>
</ul>
</p>
</div>
</div>
<div id="box3">
<div id="info3">
<p>
<ul>
<li>hello world</li>
<li>I came to rule the planet</li>
<li>just kidding</li>
</ul>
</p>
</div>
</div>
<div id="box4">
<div id="info4">
<p>
<ul>
<li>no one will read this anyway</li>
<li>this is not fun anymore</li>
<li>finally</li>
</ul>
</p>
</div>
</div>
</body>
And of couse with help of css you can position and format the info containers the way you want.
i am having a hard time trying to animate this box, so the changes go smooth, but i just cannot figure out how to keep everything together. Help would be really appreciated. (already tried with 'switchClass') Here is the whole code:
<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<style>
#box {
position: relative;
margin: auto;
padding: auto;
display: block;
width: 167px;
height: 167px;
}
#box .item {
position: relative;
margin: 0;
display: block;
width: 100%;
height: 33%;
cursor: pointer;
}
#box .over {
height: 84%;
}
#box .other {
height: 8%;
}
#top {
background: red;
}
#mid {
background: green;
}
#bot {
background: blue;
}
</style>
<script>
function anim(item) {
$('.item').attr('class', 'item other');
$('#' + item.id).attr('class', 'item over');
}
function clean() {
$('.item').attr('class', 'item');
}
</script>
<div id='box' onmouseout="clean()">
<div id='top' class='item' onmouseover='anim(this)'></div>
<div id='mid' class='item' onmouseover='anim(this)'></div>
<div id='bot' class='item' onmouseover='anim(this)'></div>
</div>
edit: this code is running just fine, but its just an example of final output (just some animations needed)
Maybe this is not super cool, but seems to do job:
var $items = $('.item').on({
mouseover: function () {
$items.removeClass('over other');
$items.stop().filter(this).animate({height: '84%'}, function () {
$(this).addClass('over');
})
.end().not(this).animate({height: '8%'}, function () {
$(this).addClass('other');
});
},
reset: function() {
$items.removeClass('over other').stop().animate({height: '33%'});
}
});
$('#box').mouseout(function() {
$items.trigger('reset');
});
http://jsfiddle.net/dfsq/4vnkh/1/
If you want to animate the change, please take a look at jQuery animate
Something like this:
$('.item').mouseenter(function() {
$('.item').animate({
height: 80%
}, 500, function() {
// Animation complete.
});
});
$('.item').mouseleave(function() {
$('.item').animate({
height: 33%
}, 500, function() {
// Animation complete.
});
});
in this case you don't need onmouseout or onmouseover
If your animation is based solely on CSS class attributes why not use CSS3 hover pseudo-selector?
Example:
.box {
width: 200px;
}
.box:hover {
width: 400px;
}
<div class="box">Hover over me!</div>
Additional: Response to comments
If you are looking for custom animation duration you can use a callback function with a duration for the initial function call. Here's an example:
$('#div').animate({
width: '200px',
color: 'blue'
}, 5000, function() {
// Animation finished after 5 seconds.
alert("Animation complete!");
});
Addition #2
Your problem child is this little guy:
$('.item').attr('class', 'item other');
This sets each box to 8% height and THEN expands the primary animating box. Remove this and your #box will remain the same height throughout all animations!
I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks
See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}
The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});