Trying to make this minimal jQuery slideshow (Simple jQuery slideshow using animate()), but how do I make the 3rd and 4th image slide "together" like in the 1st and 2nd image?
http://jsfiddle.net/frank_o/eku4Lwt1/44/
JS:
changeSlide(1, $(".slideshow img"));
function changeSlide(i, items) {
setTimeout(
function()
{
var currentItem = items.eq(i),
prevItem = items.eq(i-1);
prevItem.css("left", -prevItem.width());
currentItem.css("right", 0);
changeSlide(i+1, items);
}, 2000);
}
HTML:
<div class="slideshow" style="height: 100px; width: 200px; overflow: hidden;">
<img src="http://lorempixel.com/200/100" />
<img src="http://lorempixel.com/200/101" />
<img src="http://lorempixel.com/200/102" />
</div>
CSS:
.slideshow {
background: white;
position: relative;
}
.slideshow img {
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100px;
-webkit-transition: all 2s ease;
}
.slideshow img:first-child {
left: 0;
}
Ideally they should slide like in this Slick.js example (although I feel Slick is overkill for this job):
http://jsfiddle.net/frank_o/eku4Lwt1/2/
I have changed your code quite a bit: JSFidle
First of all, you should do prevItem.css("right", prevItem.width()); instead of prevItem.css("left", -prevItem.width());. And CSS should be changed like this:
.slideshow img:first-child {
right: 0px;
}
I have also changed the animation to circularly repeat. Dunno if you can use it, otherwise here is what you asked for http://jsfiddle.net/eku4Lwt1/56/
How about this: http://jsfiddle.net/eku4Lwt1/64/
In your JS change this line:
currentItem.css("right", 0);
->
currentItem.css("left", 0);
And in your CSS change the image positioning to left: 200px;:
.slideshow img {
position: absolute;
top: 0;
left: 200px;
}
Related
I'm trying to create a Side menu for my responsive website. I'm not that good with JavaScript but it is working! (so far)
My problem is that, I'm toggling the <nav> class to make it appear and dissapear from the left side. The button to click is outside the <nav> content and the button to close is a simple text inside the <nav> content.
So, my HTML looks like this:
<nav id="nav-slide" class="nav-slide">
Side Content <br>
Close
</nav>
That's the nav that I'm trying to Toggle. The button to open should be this image:
<img id="menu-icon" src="images/menu-icon.svg"/>
CSS:
.nav-slide {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background-color: #3f3f3f;
z-index: 99;
box-sizing: border-box;
padding: 20px;
color:#fff;
margin-left: -100%;
transition: margin 200ms ease-in-out;
}
.nav-open {
margin-left: 0px;
transition: margin 200ms ease-in-out;
}
and my JAVASCRIPT:
$("#menu-icon").click(function(){
$("#nav-slide").toggleClass("nav-open");
});
$("#close-button").click(function(){
$("#nav-slide").toggleClass("nav-slide");
});
Is working so far! But when I click on Close text, and after closing the <nav> it keeps displaying <nav> content like this image:
Image with example of problem
Any way to solve this?
JQuerys toggleClass does add a new class to an item. If it already has that class, it will remove it from that item. So while your nav's base class is nav-slide, toggle nav-open only (not both). Here's a slightly different, basic example of an animated side-nav:
$('button').on('click', function (e) {
$('.menu').toggleClass('open');
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20%;
background-color: tomato;
transform: translate(-100%, 0);
transition: transform 1s;
}
.menu.open {
transform: translate(0, 0);
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<button>menu</button>
<div class="menu">
<button>close</button>
</div>
Edit: Here is a pen of your example:
http://codepen.io/wilmaknattern/pen/xZXMaW
I would like to adjust the css attribute of opacity with a range input slider. If I have:
<div id="contrastFilter"> </div>
<div id="contrastSlider">
<input id="contrast" type="range" value="contrast" max="0.5" min="0" step="0.01"></input>
</div>
and I would like to change the opacity of this:
#contrastFilter{
background-color:black;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0.2;
}
JSFiddle
What javascript would I have to add to make this work? I would like the slider to affect the square's opacity.
You could simply use input event:
JSFiddle
$('#contrast').on('input', function() {
$('#contrastFilter').css('opacity', $(this).val());
});
#contrastFilter {
background-color: black;
width: 200px;
height: 200px;
position: absolute;
top: 20%;
float: right;
left: 20%;
z-index: 2;
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="contrastFilter"></div>
<div id="contrastSlider">
<input id="contrast" type="range" value="contrast" max="0.5" min="0" step="0.01"/>
</div>
First, you're going to need to revise your CSS. That z-index on #contrastFilter is going to render it above your input, making it unclickable.
Second, you'll need to add a listener to the input's change event, get the value, and update the opacity CSS of #contrastFilter. I recommend using jQuery to facilitate cross-browser compliance.
CSS:
#contrastFilter{
background-color:black;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.2;
}
#contrastSlider {
position: absolute;
}
JavaScript (using jQuery):
$(document).ready(function() {
$('#contrastSlider').change(function(e) {
var value = $(e.target).val();
$('#contrastFilter').css('opacity', value);
});
});
Forked fiddle: http://jsfiddle.net/Lmyoz94j/
I have images that I want to be invisible and then faded in when certain events occur. My jQuery works fine and the elements are positioned correctly, I just can't get the elements to fade in.
When I type in console $('#img1').fadeIn();nothing happens.
CSS
img {
position: absolute;
border-radius: 20px;
height: 195px;
width: 300px;
opacity: 0;
}
#img1 {
left: 270px;
}
#img2 {
right: 270px;
}
Use display: none; instead opacity: 0;
http://jsfiddle.net/rLjz1rv0/
Remove opacity: 0, and replace by
visibility: hidden;
use fadeTo
$('#img1').fadeTo( 'slow', '1')
demo - http://jsfiddle.net/rLjz1rv0/1/
Is there a way to ignore certain transitionend events based on css property? For example in the following code, the height transition ends much sooner than the left transition. Is there a way to ignore the height transition to get the last transitionend event?
html:
<div id="testButton"></div>
<div id="wrapper" class="wrapper">
<div id="menu" class="menu">
<div id="menu-sets" class="menu-sets">
</div>
</div>
</div>
css:
#testButton {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background-color: #00ff00;
}
.menu-sets {
position: absolute;
visibility: hidden;
overflow: hidden;
top: 0;
left: -50px;
z-index: 100;
width: 100px;
height: 100px;
background-color: #ff0000;
transition: left 3.3s ease-out, height 0.2s ease-out;
}
.show-menu-1 .menu-sets {
visibility: visible;
left: 0px;
height: 200px;
}
js:
$(document).ready(function () {
$("#testButton").click(
function () {
$('#wrapper').addClass('show-menu-1'); // show menu
}
);
$('#menu-sets').one('transitionend', function() {
alert("event done");
});
});
jsfiddle example:
http://jsfiddle.net/rotaercz/zysxsc41/2/
There sure is, the original event contains information about the property being transitioned
$('#menu-sets').on('transitionend', function(event) {
if ( event.originalEvent.propertyName === 'left' ) {
alert('done');
$('#menu-sets').off('transitionend');
}
});
As one() only fires once, you'll have to use on() and unbind instead
FIDDLE
I'm trying to replicate the fade in the background image of this site. How would I go about doing so with jQuery?
Use an image as a background image. i.e., <img /> tag. Then use jQuery's .animate() function:
$(document).ready(function(){
$('img.bg').animate({
opacity: 1;
}, 1000);
});
CSS:
.bg {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
HTML:
<img src="bgimage.png" class="bg" />
Working demo http://jsfiddle.net/9HTkV/ (and coz I like hulk) :P
Start with opacity 1 and then make it zero as it is fade in.
This should help :)
code
$('.box2').animate({
opacity: 0
});
CSS in start you want Opacity to be 1 and then make it 0.
.box2 {
height: 500px;
width: 700px;
background: #000000;
opacity: 1;
}