jquery animate opacity arrows mouseenter mouseleave - javascript

I'm trying to add an opacity effect with jquery when we past on arrows navigation but it seems that nothing happens :(. Do you know what's wrong with my Jquery script.
Here my Jquery :
$(document).ready(function(){
$(".flscroll").mouseenter(function(){
$("flscroll").animate({opacity:1},300);
});
$(".flscroll").mouseleave(function(){
$(".flscroll").animate({opacity:.8},300);
});
});
I defined my arrows like in my css :
.flscroll {
display:block;
height: 83px;
opacity: 0.8;
position: fixed;
top: 40%;
z-index: 1000;
}
.ie8 .flscroll {
filter: alpha(opacity=80);
}
#flscrollg {
background: url(images/sprite.png) no-repeat 50px -100px;
left: -30px;
padding-left: 50px;
width: 52px;
}
#flscrolld {
background: url(images/sprite.png) no-repeat left -200px;
padding-right: 50px;
right: -30px;
width: 53px;
}
My html arrows declaration is like that :

So I mentioned in the comment that it might be your Jquery missing the fullstop in this line of code
$("flscroll").animate({opacity:1},300);
//Should be
$(".flscroll").animate({opacity:1},300);
I have added it in this FIDDLE and it works fine.
Is this what you are after?

try this
$(document).ready(function(){
$(".flscroll").on('mouseenter',function(){
$(this).animate({opacity:1},300);
}).on('mouseleave',function(){
$(this).animate({opacity:0.8},300);
});
});

Related

Create back to top button using jquery facing issue with code

I have fixed button on my index.php thats works for going to top when user is at the bottom of the page.
<button id="fixed-btn"></button>
and its css is like this.
#fixed-btn{
position: fixed;
bottom: 50px;
right: 50px;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: red;
opacity: 0;
}
#fixed-btn.show{
opacity: 1;
}
for doing so i write jquery
$(document).ready(function()
{
function testScroll(ev)
{
if(window.pageYOffset>400)
{
$('#fixed-btn').addClass('show');
}
else
{
$('#fixed-btn').removeClass('show');
}
}
window.onscroll=testScroll
$("#fixed-btn").click(function()
{
$('html, body').animate(
{
scrollTop:0
}, 1500 );
});
i don't know why it is not working.button is not visible . can anyone has idea about it then please share . Thanks in advance :)
I see your code i think this will solve your problem.replace your css by given below
#fixed-btn{
position: fixed;
bottom: 50px;
right: 50px;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: red;
z-index: 9999;
opacity: 0;
}
you just add z-index: 9999; in this #fixed-btn{..}
if still face issue then let me know.

horizontal navigation slide out with grow effect

I want to recreate an effect I saw on airforce.com . It's right below the hero, I poked around a bit and can't seen to find out what they did.
It looks like it was developed using knockout but I would like to recreate it using jQuery and Css.
If you know what the effect is called or know of a library that can achieve this, PLEASE let me know thanks!
https://www.airforce.com/
I created a simple mockup of the effect using css only. View fiddle
https://jsfiddle.net/rob_primacy/p6ee9d71/2/
<div class="image-block">
<div class="image"></div>
</div>
.image-block {
position: relative;
width: 300px;
left: 200px;
}
.image {
display: block;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
transition: all ease .3s;
height: 600px;
background: url("http://www.difrusciaphotography.com/wp-content/uploads /2015/08/Place-to-unwind_Lake-Kananaskis-Alberta-Canada.jpg") #000 no-repeat center center;}
.image-block:hover .image {
left: -40px;
right: -40px;
transition: all ease .3s;
}

zoom image when mouse hover

am trying to make more zoom when mouse hover on zoomed image. i mean when cusror hover on zoomed image, some part like square, rectangle, circle e.t.c part of image should zoom.
i have the following code. please suggest me how can i achieve more zoom after zooming the image by onclick.
<div id="overlay"></div>
<div id="overlayContent">
<img id="imgBig" src="" alt="" width="400" />
</div><div class="imgSmall"><img src="xyz"
id="ProductPhotoImg">
</div>
</div>
<script>
$("#ProductPhotoImg").click(function(){
$("#imgBig").attr("src",$(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$("#overlay").hide();
$( "#overlayContent" ).hide();
}
});
</script>
<style>
#overlay{
position: fixed;
padding-right:10px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
#overlayContent{
position: fixed;
-webkit-transform: scale(1.7);
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
align-content:center;
width: 100%;
height: 100%;
display: none;
z-index: 100;
top: 100px;
padding-right: 24em;
padding-left: 14.3em;
top:16.2em;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall, #ProductPhotoImg{
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
}
</style>
This code is for onclick zoom.but i want further zoom on mouse hover for zoomed image(like when mouseover on image only hoverd part of image should be zoomed), please sort out my issue friends.
Thanks in advance :)
The best way to do that is with the :hover pseudo class. all you do is..
// Name class
.class {
height: 20px;
width: 20px;
}
.class:hover {
height: 25px;
width: 25px;
}
You can change those numbers to whatever you'd like but you should also look at other cool pseudo classes you can use in css! :) Hope this helps!
you can do it easier :
.normalpic {
width: 25px;
height: 25px;
}
.normalpic:hover {
width: 50px;
height: 50px;
}
This will make the image 2x larger on hover
why don't you try css hover?
like:
.myClass{
height: 100px;
transition: 1s;
}
.myClass:hover{
height: 200px;
}
at the click event you call a javascript function like:
function myFunc(object){
object.className += "myClass";
}

Making images fade in

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/

How to slide toggle a pseudo element?

As you can see in this jsfiddle, when you click the menu button, the little triangle that points to the button is only shown after the animation has finished. I'd like the animation to start with the pseudo element and only then proceed to the drop-menu element. How can I accomplish this?
A solution doesn't necessarily have to use javascript, CSS3 will be most welcome, I'm not worried about compatibility issues.
You can try this - DEMO
.drop-menu {
display: none;
position: relative;
height: 60px;
top: -20px;
}
.drop-menu ul::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -30px;
left: 30px;
border-width: 15px;
border-color: transparent transparent red transparent;
border-style: solid;
}
.drop-menu ul {
background-color: red;
position: relative;
top: 20px;
z-index: 999;
}
See http://jsfiddle.net/SZWmd/23/
The problem is that while sliding, the element must have overflow:hidden, but then the triangle is hidden too.
Then, you have to slide .drop-menu ul instead of .drop-menu. You could easily do
$('.drop-menu-button').click(function() {
$('.drop-menu').toggleClass('visible');
$('.drop-menu ul').slideToggle();
});
and use this selector:
.drop-menu.visible::before
But the problem is that when is sliding up, the triangle is hidden at the beginning.
Then, you need
$('.drop-menu-button').click(function() {
if($('.drop-menu').hasClass('visible')){
$('.drop-menu ul').slideUp('',function(){
$('.drop-menu').removeClass('visible');
});
}else{
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideDown();
}
});
Edit:
You can also use
$('.drop-menu-button').click(function() {
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideToggle('',function(){
if(!$(this).is(':visible')){
$('.drop-menu').removeClass('visible');
}
});
});
See it here: http://jsfiddle.net/SZWmd/31/

Categories

Resources