Develop Reference

Vue js how to animate component display from top to bottom

I have four components when you hover the mouse over the picture, a certain component is displayed, the problem is that my components are displayed ugly without animation, I want to do so that when I hover over the picture, my components are displayed in an animated way from top to bottom.
As you can see, I have four pictures, for example, when you hover over the first picture, the first component is displayed when you hover over the second, the second component, and so on.
<div class="EnjoyGirlsList">
<div #mouseover="mouseOver1" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-1.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #74C8C5" class="EnjoyCardChildContainer">
<h3>Teens</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver2" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-2.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #76ED00" class="EnjoyCardChildContainer">
<h3>Minxes</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver3" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-3.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #FFE600" class="EnjoyCardChildContainer">
<h3>MILFS</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver4" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-4.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #CC003D" class="EnjoyCardChildContainer">
<h3>COURGARS</h3>
</div>
</div>
</div>
</div>
</div>
<div class="EnjoyGirlsHoverEffect">
<EnjoyBlue v-show="img1"/>
<EnjoyGreen v-show="img2"/>
<EnjoyYellow v-show="img3" />
<EnjoyRed v-show="img4" />
</div>
export default {
name: "HomePage",
components: {EnjoyRed, EnjoyYellow, EnjoyGreen, EnjoyBlue, Navbar, GirlsSectionList, FeaturedShows,},
data() {
return {
img1: false,
img2: false,
img3: false,
img4: false,
}
},
methods: {
mouseOver1: function(){
this.img1 = true
},
mouseOver2: function(){
this.img2 = true
},
mouseOver3: function(){
this.img3 = true
},
mouseOver4: function(){
this.img4 = true
},
mouseout: function() {
this.img1 = false;
this.img2 = false;
this.img3 = false;
this.img4 = false;
}
}
}

<div style="margin-top: 50px;">
<slide-y-up-transition>
<RedExperience v-show="img1" />
</slide-y-up-transition>
<slide-y-up-transition>
<OrangeExperience v-show="img2" />
</slide-y-up-transition>
<slide-y-up-transition>
<GreenExperience v-show="img4" />
</slide-y-up-transition>
<slide-y-up-transition>
<BlueExperience v-show="img3" />
</slide-y-up-transition>
</div>
import {SlideYUpTransition} from 'vue2-transitions'
components: {SlideYUpTransition},

How to get this code to move one class at a time

So I have three DIVs with the same carousel effect. I am pretty sure I can use three different JavaScript codes to move one at a time but would like to make it as minimal code as possible. With the current code, when I click on the arrow once, all three of them moves. How can I get them to move separately?
There's three of the same one as the one below:
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 1000,
leftArrow: $this.find('.arrow-left'),
rightArrow: $this.find('.arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
//settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
//settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
//settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
//settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('.gallery').thumbGallery();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
<h2>Open Space</h2>
<p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
<center>
<div class="gallery">
<div class="arrow-left">
<div class="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>
<span class="btn_margin">
<asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
</span>
</center>
</div>

The reason they move together is because you use the .gallery selector when you call thumbsGallery(), which applies to all elelements that have class="gallery" in the HTML code. What you can do is to simply add a unique id to each of the gallery and call thumbsGallery() with each of the selectors.
HTML:
<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>
Javascript:
$(document).ready(function () {
$('.gallery#executive_gallery').thumbGallery();
$('.gallery#conference_gallery').thumbGallery();
$('.gallery#open_gallery').thumbGallery();
});
JSFiddle: https://jsfiddle.net/3qeLumkp/1/

Portfolio Filter on a Horizontal Scroll Website not working

I'm just a graphic design student and I barely know about coding or javascript.
In my website, I have horizontal scroll with a left navigation bar with a fixed position. I want to filter all of my projects in different categories. For example, when I click on "Branding" all the branding projects show up and all the other projects disappear.
I've tried different options and none of them work. When I click on the filter it doesn't do anything.
I don't know if there is a problem with my html or the script. Please help me.
I used and kind of changed the jQuery from this website:
queness.com Below is all of my html and everything.
https://jsfiddle.net/PaulinaPaulino/hbk8z161/
<body>
<nav class="fixed-nav-bar">
<li>
<div id="home">
Paulina Paulino
</div>
</li>
<li>All</li>
<li>Branding</li>
<li>Editorial</li>
<li>Infographics</li>
<li>Photography</li>
<li>Poster</li>
<li>Typography</li>
<li>
<div id="about">
About
</div>
</li>
<li>
<div id="contact">
—paulinapaulino9#gmail.com
<div class="icons">
<a target="_blank" href="https://twitter.com/PaulinaPaulino9"><img src="icons/twitter.png" alt="twitter" style="height:40px;"></a>
<a target="_blank" href="https://www.instagram.com/paulinapaulino/"> <img src="icons/instagram.png" alt="instagram" style="height:40px;"></a>
<a target="_blank" href="https://www.linkedin.com/in/paulina-paulino-94b29490"><img src="icons/linkedIn.png" alt="linkedinprofile" style="height:40px;"></a>
<a target="_blank" href="Resume.pdf"><img src="icons/resume.png" alt="resume" style="height:35px;"></a>
</div>
</div>
</li>
</nav>
<div id="portfoliolist">
<div class="panel" data-cat="photography">
<div class="project1">
<a href="####"><img src="pages/projects/p1-Paint/_MG_8797.jpg" alt="couple-covered-in-paint" style="height:590px;">
<p>Paint</p>
</a>
</div>
</div>
<div class="panel" data-cat="infographics">
<div class="project2">
<a href="###"><img src="pages/projects/p2-Online-Affairs-Infographic/01-front-top.png" alt="infographic" style="height:590px;">
<p>Online Affairs Infographic</p>
</a>
</div>
</div>
<div id="project3" class="panel">
</div>
<div id="project4" class="panel">
</div>
</div>
<script>
$(function() {
var filterList = {
init: function() {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.panel',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function() {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function() {
$(this).find('.label').stop().animate({
bottom: 0
}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({
top: -30
}, 500, 'easeOutQuad');
},
function() {
$(this).find('.label').stop().animate({
bottom: -40
}, 200, 'easeInQuad');
$(this).find('img').stop().animate({
top: 0
}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
</body>

I just had to apply everything that this filter jQuery did from the link below.
http://www.newmediacampaigns.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours

Multiple Div Fade In/Out On

I have three divs, each containing multiple images.
There are also three buttons on the page.
I would like to create an effect where clicking on each button fades in the corresponding div and fades out the other two divs.
I have tried to follow code posted previously for similar effects, but have been unsuccessful and am hoping for some help from those who have more skill than I do! Thanks, Ross
The HTML is as follows;
<div id="GROUP-Join">
<img class="CentreBox" src="images/CentreBox.png"
width="487" height="173">
<img id="TitleOne" src="images/TitleOne.png"
width="339" height="19">
<img id="TitleTwo" src="images/TitleTwo.png"
width="143" height="14">
<body onLoad="focus();signup.email.focus()"></body>
<form method="post" name="signup" action="signup.php">
<input id="EmailAddress" type="text" name="email"
placeholder="e-mail" style="color: #000000;
font-family: 'Arial'; font-size: 20px; background-color:transparent;
border:hidden;" size="24" maxlength="49">
<input id="Go" type="image" name="submit" src="images/Go.png"
alt="submit" value="GO">
</form>
</div>
<div id="GROUP-About">
<img class="CentreBox" src="images/CentreBOX.png"
width="487" height="173">
<img id="AboutHead" src="images/AboutHead.png"
width="132" height="19">
<img id="JumpAround" src="images/JumpAround.png"
width="379" height="33">
<img id="Win" src="images/Win.png"
width="254" height="15">
</div>
<div id="GROUP-Contact">
<img class="CentreBox" src="images/CentreBOX.png"
width="487" height="173">
<img id="ContactHeading" src="images/ContactHead.png"
width="124" height="19">
<img id="Email" src="images/e-mail.png"
width="24" height="17">
<img id="Twitter" src="images/tw.png"
width="24" height="20">
<img id="fb" src="images/fb.png"
width="10" height="21">
</div>
<button id="button1">Join</button>
<button id="button2">About</button>
<button id="button3">Contact</button>

I'm not sure this is what you're meaning, but this will fade in each corresponding div and fade out the other two.
<script type="text/javascript">
$(document).ready(function () {
$('#btn1').click(function () {
$('#div1').fadeIn();
$('#div2').fadeOut();
$('#div3').fadeOut();
});
$('#btn2').click(function () {
$('#div1').fadeOut();
$('#div2').fadeIn();
$('#div3').fadeOut();
});
$('#btn3').click(function () {
$('#div1').fadeOut();
$('#div2').fadeOut();
$('#div3').fadeIn();
});
});
</script>
And the markup:
<div>
<div id="div1">
hello
</div>
<div id="div2">
hello 2
</div>
<div id="div3">
hello 3
</div>
<div>
<input type="button" id="btn1" />
<input type="button" id="btn2" />
<input type="button" id="btn3" />
</div>
</div>
The jquery fadeIn and fadeOut functions also have callbacks, so you could also do:
$('#div2').fadeOut(100,
function() { $('#div3').fadeOut(100,
function() { $('#div1').fadeIn(100);
});
});

Check this FIDDLE
This script should get the work done for you
$(function(){
$('button').on('click', function() {
var btnText = $(this).text();
$('div').fadeOut('slow');
$('#GROUP-'+btnText).fadeIn('slow');
});
});​

When you run an effect in jQuery such as fadeIn, you can provide a callback so that you can perform actions once that effect has completed. For instance, in your case:
$('#button1').click(function() {
$('#GROUP-Contact').fadeOut(500);
$('#GROUP-About').fadeOut(500, function() {
$('#GROUP-Join').fadeIn(500);
});
});
This is my best guess of what you are looking for without seeing any JS code.

Getting and passing IDs to jQuery script

I want to write a script that changes page content but within a foreach array. I have this HTML:
<div id="bigleftproject">
<p>content which will be swapped</p>
</div>
<!-- thumbnails (foreach array -->
<div class="prj_thumb" id="thumb1">
<h2 class="active">project 1</h2>
<img src="../img/thumbnail1.png" alt="thumbnail" width="100" height="50" />
</div>
<div class="prj_thumb" id="thumb2">
<h2 class="active">project 2</h2>
<img src="../img/thumbnail2.png" alt="thumbnail" width="100" height="50" />
</div>
<div class="prj_thumb" id="thumb3">
<h2 class="active">project 3</h2>
<img src="../img/thumbnail3.png" alt="thumbnail" width="100" height="50" />
</div>
<!-- end -->
and I have the beginnings of my jQuery script:
$(document).ready(function(){
$('.prj_thumb').click(function() {
$('#bigleftproject').load('http://www.mysite.com/projects/small/thumb1');
});
});
Essentially, what I am trying to achieve is for the jQuery script to grab the ID of '.prj_thumb' and pass that into the final part of the URL in the .load function.

Is this what you're looking for?
$(document).ready(function(){
$('.prj_thumb').click(function() {
$('#bigleftproject').load('http://www.mysite.com/projects/small/' + this.id);
});
});

Style class -
.btn {
}
Javascript (jQuery) -
jQuery(document).ready(function() {
jQuery(".btn").each(function(index, element) {
alert(this.id);
});
});
HTML -
<div class="btn" id="btn1"></div>
<div class="btn" id="btn2"></div>
<div class="btn" id="btn3"></div>