Fade in a non-text element during mouse over - javascript

I'm trying to fade in an element on my page that is some text formatted with CSS. I can get a plain text element to fade in using element.fadeIn(). But that doesn't work with my document's current element. The onMouseOver and onMouseOut events are correctly just showing and hiding the element with no fade. I'm trying to get it to fade in (and eventually fade out) with the mouse events.
The first part of the <body>:
<body>
<div class="content">
<h1 class="title">Application</h1>
<ul id="sdt_menu" class="sdt_menu" >
<li onMouseOver="change_it('sub2');" onMouseOut="change_back('sub2');">
<a href="../app.exe">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">APPName</span>
<span class="sdt_descr">Click to Install</span>
</span>
</a>
Function for trying to fade in the text:
function change_it(id)
{
setVisibility(id, 'inline');
//id.FadeIn("slow");
// $('div.detail').fadeIn('fast');
}
Function to setting the visibility:
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
The "sub2" element:
<div class ="detail" id="sub2">
<p><b>Welcome my application!</b></p>
<p>Here is a bunch of text I want to fade in during a mouse over another element!
</p>
</div>
From the CSS file:
.detail{
position: fixed;
top: 0;
left: 35%;
width: 650px;
height: 300px;
Line-height: 1.4em;
color : white;
}
Can someone spot the problem or suggest what I need to do to fade in the "sub2" element during that mouse over action?

Since you didn't answer my question about display vs visibility, I'll assume you want it to take up space (example):
css:
.fade-in
{
opacity: 0;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.fade {
opacity: 1;
}
jquery:
$(document).ready(function()
{
$('.fadeIn').on('click', function()
{
var target = $(this).data('target');
$(target).toggleClass('fade');
});
});
html:
Click me!
<div id="theId" class="fade-in">You clicked on Click me!</div>
<div>Hi!</div>
JsFiddle Example

Related

jquery change image src on click, and revert to original image on second click

Long time lurker.. first post.
I'm looking to make a play/pause button that animates on hover,
and that changes from 'play' to 'pause' button on click.
(I'm using it to trigger an audiofile)
i have this working by stacking two different coloured images and have a transition in CSS (opacity) on mouse over.
I have been struggling to change the src on click in javascript/jquery, which i managed to get to work (play button turns into pause button, css transition still functional) but i have no clue how to make a conditional if/then statement to have it revert back to the original 'play' button images on the next click.
I've tried quite a few things and feel that i'm close, but since i have little to no experience in javascript/jquery, I have no clue how to proceed.
I hope that my question is somewhat understandable and I'd very much appreciate any help i can get!
$("document").ready(function() {
$("#playpause").click(function() {
$("#top").attr("src", "//placehold.it/100?text=play");
$("#bottom").attr("src", "//placehold.it/100?text=pause");
});
});
#playpause {
position: relative;
height: 24px;
width: 24px;
margin: 5px 10px 0 0;
}
#playpause img {
position: absolute;
left: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
-o-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#playpause img.top:hover {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playpause" class="one column">
<a id="flytonight" href="#">
<img class="bottom" id="bottom" src="//placehold.it/100?text=play" />
<img class="top" id="top" src="//placehold.it/100?text=pause" />
</a>
</div>
You just need to check the current src attribute in each click, and change it accordingly. You will be always switching between the two src values.
$("document").ready(function() {
$("#playpause img").click(function() {
if ($(this).attr("src") === "//placehold.it/100?text=play")
$(this).attr("src", "//placehold.it/100?text=pause");
else if ($(this).attr("src") === "//placehold.it/100?text=pause")
$(this).attr("src", "//placehold.it/100?text=play");
});
});
Demo:
$("document").ready(function() {
$("#playpause img").click(function() {
if ($(this).attr("src") === "//placehold.it/100?text=play")
$(this).attr("src", "//placehold.it/100?text=pause");
else if ($(this).attr("src") === "//placehold.it/100?text=pause")
$(this).attr("src", "//placehold.it/100?text=play");
});
});
#playpause {
position: relative;
height: 24px;
width: 24px;
margin: 5px 10px 0 0;
}
#playpause img {
position: absolute;
left: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
-o-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playpause" class="one column">
<a id="flytonight" href="#">
<img class="bottom" id="bottom" src="//placehold.it/100?text=play" />
</a>
</div>
I'm sorry I did not pay enough attention to your question, this would be a solution:
var playToggle = false;
$("#playpause").click(function() {
if (playToggle === true){
$("#top").attr("src", "//placehold.it/100?text=play");
$("#bottom").attr("src", "//placehold.it/100?text=pause");
else{
$("#bottom").attr("src", "//placehold.it/100?text=play");
$("#top").attr("src", "//placehold.it/100?text=pause");
}
playToggle = !playToggle;
});

Keep div visible in the middle of the window while scrolling down and fade out after reaching a certain point

I am trying to do a simple parallax effect with jQuery and CSS.
I have 2 long divs, one is 2000px and the other is 1000px each one of those divs have a child div with text inside.
I would like to have these child divs to be centered in the middle of the visible window (not the div which is 2000px high, just the visible window) and to stay centered and in the middle while I scroll down, then fade out at a certain point before reaching the next div.
At the moment, I managed to create the html layout and the css, and made the divs to fade out on click using jQuery.
But I am unable to center them in the middle of the window and keep them fixed while I scroll down and fade them out before reaching the next div.
Maybe I can use Waypoint.js to trigger events at certain points in the scroll but how do I keep the div centered and visible to achieve the parallax effect?
DEMO https://jsfiddle.net/fmub10pv/4/
EDIT Are there any plugins (with demo) that can achieve what I want?
EDIT 2 The desired effect is something like this http://davegamache.com/parallax/
HTML
<div class="container" id="firstContainer">
<div class="row">
<div class="col-md-12 text-center">
<div id="firstDiv" class="animate text-center">
<h1>First Div</h1>
</div>
</div>
</div>
</div>
<div class="container" id="secondContainer">
<div class="row">
<div class="col-md-12 text-center">
<div id="secondDiv" class="animate text-center">
<h1>Second Div</h1>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #16191b;
color: white;
}
#firstContainer {
height: 2000px;
margin-top: 80px;
background: darkslategrey;
}
#secondContainer {
height: 1000px;
background: darkslateblue;
}
.animate {
padding: 20px;
background: mediumseagreen;
}
#firstDiv {
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#secondDiv {
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
Javascript
$(document).ready(function() {
var current = $(window).scrollTop();
var winHeight = $(window).height();
var total = winHeight - current;
$('#firstDiv').on('click', function() {
if ($('#firstDiv').css('opacity') == 0) $('#firstDiv').css('opacity', 1);
else $('#firstDiv').css('opacity', 0);
});
$('#secondDiv').on('click', function() {
if ($('#secondDiv').css('opacity') == 0) $('#secondDiv').css('opacity', 1);
else $('#secondDiv').css('opacity', 0);
});
});
The following will check if you've passed a certain waypoint and update the opacity for how much further you scroll thereafter.
Do you mind jQuery?
$(window).scroll(function() {
waypoint = 400
if ($(document).scrollTop() > waypoint) {
alpha = 1 - (($(document).scrollTop() - waypoint) / 260) // 260 is an arbitrary number, the size determines how quickly it will fade out (reach 0)
} else {
alpha = 1
}
$("#fade").css({
"opacity": alpha
});
});
https://jsfiddle.net/mqk9xux6/
This can be achieved by creating a class that makes use of the fixed position, which then gets applied to the target element based on scroll offset. Note that the fixed position is not a block-level element, so you will need to give it a width of 95% as well to match the original design:
CSS:
.fixed {
position: fixed;
width: 95%;
}
jQuery:
$(window).scroll(function() {
if ($(document).scrollTop() > 2000) {
$('#firstDiv').removeClass('fixed');
} else if ($(document).scrollTop() <= 2000) {
$('#firstDiv').addClass('fixed');
}
});
In the above example, I've used an offset of 2000px. This means that the first DIV will stay fixed until it overlaps exactly with the second DIV. Scrolling up the page, the first DIV will stay fixed again. Hopefully this is the sort of effect you're looking for.
I've created a fiddle showcasing this here.
Hope this helps! :)
Add fade-in class to the first div initially
<div id="firstDiv" class="animate text-center fade-in">
To center the divs
#firstDiv,
#secondDiv {
position: fixed;
top: 20%;
left: 0;
right: 0;
margin : 0 auto;
height : 500px;
width : 500px;
transition: opacity 0.5s ease;
opacity:0;
}
To fade them out on scroll
$(window).scroll(function (){
var scrollPos = $(this).scrollTop();
if(scrollPos >= 2000)
$("#firstDiv").removeClass("fade-in");
if(scrollPos >= 2200)
$("#secondDiv").addClass("fade-in");
}).scroll();

Angular v1.2 animation for images

I have been going through tutorials and past questions, trying to figure out where my code is going wrong for applying an animation to the transition of the images I am trying to display.
ng-show works effectively to only show the selected picture, but the transition of pictures doesn't pick up the effects I try to apply to it.
<!-- Image Buttons -->
<div class="content">
<div ng-repeat='image in images' class="{{image.cls}}"
ng-click="showThis($index)" value="{{image.set}}">
<label>{{image.title}}</label>
</div>
</div>
<!-- Display Image -->
<div id="imgHolder" ng-view class="slidedown">
<img ng-repeat="image in images" ng-src="{{image.url}}"
alt="{{image.id}}" ng-show="nowShowing==$index">
</div>
I realize that I should probably display the images using the same ng-repeat; currently the css to make that happen needs to be adjusted, so that will come later.
Here is .slidedown, containing the animation css:
.slidedown {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slidedown.ng-enter,
.slidedown.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.slidedown.ng-enter {
opacity: 0;
}
.slidedown.ng-enter-active {
opacity: 1;
}
.slidedown.ng-leave {
opacity: 1;
}
.slidedown.ng-leave-active {
opacity: 1;
}
Can anyone provide any tips, errors, directions to head in?
just put the class="slidedown" on the img not the div
<div id="imgHolder" ng-view>
<img ng-repeat="image in images" ng-src="{{image.url}}" class="slidedown"
alt="{{image.id}}" ng-show="nowShowing==$index">
</div>

Show icon font on image center on mouse hover

I´m trying to do an effect and show a search icon font when the mouse hover my "image1.png".
I already did the effect with jQuery but now I do not see how I can integrate the iconic font with jquery. Has anyone done something like that? Can you give a little help?
<article id="loop-news">
<span id="testIcon"><I class = "fa fa-search-plus" > <!--show just on mouse hover -->
<img src="image1.png" id="test" />
<h2>Title </h2>
<p>My Post</p>
</article>
My css to hide icon font at first:
#testIcon>i{display:none;}
My jquery to give an opacity effect:
$("#test").hover(function() {
$(this).animate({opacity: 0.5}, 500);
}, function() {
$(this).animate({opacity: 1.0}, 500);
});
I would use CSS3 transitions if I understand your issue. In this example, I would just replace the font-family with your icon font (assuming that's how it works - never used it).
h2 {
position: aboslute;
margin-top: -350px;
display: none;
text-align: center;
font-family: arial;
}
#loop-news:hover h2 {
display: block;
}
#loop-news:hover img {
opacity: .5;
}
img, h2 {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
JS Fiddle

Toggle divs with pure JS

The scenario: one main container, a child img with opacity 1 and a child span with opacity 0, both absolute positioned against the relative positioned parent div. Decrease the opacity of img and simultaneously increase the opacity of span. When the opacity exceeds some threshold, e.g. 0.01 and 0.99 hide/show (display: none; display: inline-block) the img/span respectively. And then the reverse process to show the img and hide the span. What would be the best solution (probably using CSS3) to achieve that?
<div id="post-cont">
<img id="post-img-1" class="post-img" src="small.jpg"/>
<span id="post-txt-1" class="post-txt">Some text</span>
</div>
Had some workaround with JS, but it is laggy so I would like to solve this using CSS3 and as minimal JS as possible.
CSS3 only
http://jsfiddle.net/SPmj5/7/
<div id="post-cont">
<img id="post-img-1" class="post-img" src="http://placehold.it/250x250"/>
<span id="post-txt-1" class="post-txt">Some text</span>
</div>
#post-cont {
position: relative;
}
#post-cont img,
#post-cont span {
display:block;
-o-transition: opacity .7s ease;
-ms-transition: opacity .7s ease;
-moz-transition: opacity .7s ease;
-webkit-transition: opacity .7s ease;
transition: opacity .7s ease;
}
#post-cont img {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
#post-cont span {
position: absolute;
top: 100px;
left: 80px;
opacity: 0;
}
#post-cont:hover img {
opacity: 0;
}
#post-cont:hover span {
opacity: 1;
}
Be aware transition is not supported in IE8/9 http://caniuse.com/#search=transition
Sounds like some fadeToggle to me! I don't think you can use pure CSS3 for this..
https://api.jquery.com/fadeToggle/

Categories

Resources