jQuery Sliding Effects

Hello guys, you are welcome to our jQuery which was our last segment in which we have seen global selectors.

Let’s move on to today’s segments. From today we are starting a new module and that module is on jQuery effects that in jQuery what different types of effects are available. In which today’s segment is on Display effects. Now you will have a question: what is this effect? So, for example if we are having our learnVern’s website if we open it, this is our learnVern’s website. If you open that website you can see here after a moment after little pause little means when site has been load after few seconds later this particular form will load in front of us after that if you click anywhere for example I will click on all courses so here our large menu will show same if I will close you can see some like in a way means it opens slowly like scroll and open, and it will scroll and then disappear.

So, this one type of effect that we can say. This is on our learnVern website where you can see the scrolling effect from which you can open the menu here. If we scroll down then you can see that a smooth scroll is coming there when I click , on this button my mouse pointer passes from there then color has been changed smoothly that is also one kind of effect. If I scroll this testimonial, that is also one kind of effect. If I click on login, then I will click on the login page directly, same click on join for free then also one specific whatever requested page will be there, I will redirect there.

So, a different thing is happening here in that some things happen with effects and something happen without effects. There is one effect that, when the menu opens and closes, that sliding effect will be shown to you. So, the effect which is added there how it is added? And we have seen currently only one effect at learnVern’s site that is related to scroll smooth scroll and scroll close. There are more effects available except this also which we can add with help of JavaScript. And now we are looking at jQuery.

So, what we do from JavaScript that is done by jQuery easily and with fewer lines of code. So, these types of effects we will see in the complete module of jQuery in jQuery’s effect module. Now, if we come to slide jQuery display effects first of all there are jQuery effects. So what are the effects? That I have explained through example or if we say it generalized. So there is some transition, some change which is different from our normal behavior that also we call effect.

In terms of jQuery they are divided into four categories first is fading effect, second is sliding effect in which learnVern menu was opening and closing this was our example of sliding effects then comes hiding and showing effect means some things is toggle, toggle means it will display and after it will hide,it will display and it will hide. So this toggling comes in hide and show and last is our animation effect. This is the last  in which we add animation so there are four types of jQuery effects.

Today's segment is totally about hiding and showing means on display so we move forward to our today’s segment. First of all, the method in jQuery related to display is the hide method. Now what is the hide method? As its name definitely we get an idea from this that this definitely uses to hide that element. So the name hide, that name only indicates that this for hide means if I have any element in my browser, in my web page I have kept any element and have to hide that element then what will I use then? I will use jQuery’s hide method.

(04/50)

So as you see here syntax also, in syntax here after dollar, dollar is our factory function, after starting factory function after dollar keep selectors and after selectors dot hide that we have to do means I want event by which I can help in adding effects, so you can see here I have use two words here one is event and second is effect. So one kind of event for example if I take any button, and on click of button and I hide one particular element or portion so here I can do this, that clicking button means firing the event or giving the effect and hiding the element so we can do this. This is one way.

Second way is to hide it by default. But if I hide element default so we won’t get to know that jQuery is being activated or not. So better we will bind it with button click or else event and then use it.

Here two types of syntax are given one is selector and then dot hide and second is selector then dot hide, speed and call back with  two parameters. So what this indicates when I call without this parameter so one with blink means one on the spot my element will disappear, will hide but if I add speed or else adds any one from is parameter then with that effect will show mean if speed is there I pass speed in millisecond so slowly my element will hide this will see from example.

What is a callback? So callback is one type of function which is active after finishing our current operation. Whichever effects will learn in this module in all functions whether it is hide, show, toggle whatever is our function with every function callback one parameter is added means our different methods for example we are looking hide. There are two type methods: one is without parameters and second is with parameters.

Without parameters,will run normally but in which parameter pass is there in that one variation function will get in which we pass callback function. It means wherever we have passed the callback function whenever my hide will finish my call back whatever function will execute. This call back function is not mandatory if you want requirement like you have to make call back function so you can add if you having requirement that you don’t want call back function you have to work without only so you can skip that also so you can count call back is add-on, count add-on functionality but it’s not necessary that you have to add so this is our hide.

Speed is to add one delay callback once the operation is performed after that function call so this is our two things done. Now we will try to understand Hide an example, what is it? So let’s say I make a program in which I take such a paragraph, a small paragraph or a statement, after clicking the button, I will hide that statement.

So take that first I will open sublime text ..this is our sublime text ,this is our HTML here in HTML set number of HTML.. example hide. So here if you know, in normal JavaScript we used to add scripts in which our code was written, in jQuery we will add our jQuery library. First of all I will add the URL of the library from here, you can find it online as well or else we have covered the first introduction segment you can take that URL from there or you can type or else go to jQuery’s official website you can take and add there whatever version you want to add, but make sure that version should be running version ok?

Now here we have added a library, after adding library whatever we type jQuery code will write in the middle of script and in body we replace our content element. So first of all let’s say.. we want to create a program like press one button and whichever is my statement should hide so, what will I do first for this I want one button and need one statement so let’s say I write  in P tag.. this is a statement.. write one statement like this. After BR will give here one button…, button,… hide and here we bind the event that is on click…, we are calling this function hide. So here we are doing two things we on click also get fired or else implement only jQuery means in place of event then my event is on fire so let's say here ID give the name Hide here ok so I have replaced on click here with ID so here comes our programme and will run also….

(10/40)

So this is our programme, here is our statement and this is our hide button so currently we didn’t add any effect that’s why by clicking also it’s not happening anything, the moment I will add then our event will be active. So if you remember firstly we learned that when we have to activate jQuery then what we write? Then firstly we will write document dot… ready and here function… and now whatever we write in this document dot ready function.

So, what I have to do is that,if  I want that, on click of this button this statement will get “hide so firstly with the help of selector i have to bind it with click event, so how do we do that? Like dollar in brackets.. in codes we will write, what will we write? Our ID so hashtag… hide our ID name is hide so, this is our selector dot.. click.. okay? So when we click on this hide then what will happen? After Clicking my function will fire.

What is a function..? So that  function is P will hide then again my selector so that is dollar in code.. P dot… hide, that’s it. Here comes our hide function. Now I save this and reload this programme. I will click on hide so you can see that as I click on hide my statement has disappeared that has been hidden. So this is our jQuery hide method as I will click on the button that will hide. So this is a normal hide function.

Reload, click and content are hidden. So if I type here two thousand this two thousand is my timestamp type in millisecond time. So if in this After adding time then I will run the programme. So you see the effect hide.. so you see that after a delay of two seconds my content is hiding. So at first I hide without time so on the spot my content was hidden but when some have added delay and time pass is in milliseconds. So I took that time my content has been hidden if I change it from two thousand to one thousand then my in one second time period content will disappear. So this is hiding within one second. So this is our hide, how we hide content on the click button. So this is our in jQuery function here is our example which we already saw.

Now as hide work that hides one thing or an element exactly opposite to this there is a task that is to show , means to show an element means what content of mine is already hidden that content has to be visible. So how will I show this? That is my hide’s opposite that is show, with help of show method. Here my two parameters on speed call are exactly the same which we see on hide. Hide and show have a difference that it will hide the element and show will show hidden element. So you have got the idea that this programme is exactly the same our next will generate. So what will I do, I will copy this programme completely… and I will paste it here? Here comes, show… this content we will keep as it is here, the statement ..ID which is here, now that I want to show. So If I have to see… something, I have to make sure my content is already hidden. So for that I will add here.. style, so here below script style… Which my P, in P will take display.. none…, if I show the programme okay? Then I have given the display, none to P and have hidden it already and here my button will show this ID I will pass here I will show, save.

So if I run this programme then you can see that initially my statement is not there so when I definitely click on show then my statement will be visible. So to hide it what we have used? CSS display none if I show, you can see my statement will show slowly.

(15/43)

Now I click and nothing will happen. This has been shown one time. Let’s reload the programme again. I click on show, as you can see my content is now visible. So here are my two programmes: one hide in which I click on to hide the content will hide and this is another programme in which my content is already hidden so  if I click on show it is showing. So we have seen two programmes one is hiding and second is show.

If we go to slide so we learn both in the same context, we will be able to learn fast what hide and show  does. If I want to do both things at the same time, that is what I have to do. So I have to hide and show,  here is one more  example given: hide and show parameters which we have already seen. When we have to hide elements we use hide and if we have to show we use show and  here we have to use  fifteen hundred and thousand speed. So basically what I have done in this programme to run both the programmes together we have used two buttons . If i make a programme like this here ( 8 seconds pause,typing), this is my hide ( 9 seconds pause,typing) okay, so here I don’t need this style, here hide will come… and here will come show.. that’s it.. save (9 seconds pause,typing) so if i click on hide then my content will hide and i click on show then my content is visible so it is like “ HIde Show Hide Show” so you can see that i have implemented both things on one statement and both are working in speed. We passed the speed parameter in milliseconds. So it takes one second to hide and one second to show. This was hide and show with speed parameters.

So now I have to do this both from one button so that my button or that method that is toggle. So what is the use of toggles? As it is written here, “toggle is a special type of method which is used to toggle between the hide and show method”. So if I don’t want to fire on one content with  two different buttons through different events, instead of having to do both at the same time from one button only, what can I do? So in that case I can use this toggle button. What toggle does? Toggle will hide my content in one click and show my content on another click.  So hide and show two different buttons’s necessity of mine will be removed and entire  work will be done by one button only.

So if I have to use a toggle I have to copy my show programme.. and paste it(4 seconds pause,typing) here okay? So in this programme here toggle(5 seconds pause,typing . We don’t have to use style, 5 seconds pause,typing save . Okay? So here is our statement if I click on toggle here it is not working maybe something is wrong so here toggle and here toggle okay, reload now I will click this, my statement has disappear again I click my statement is showing so as I click this with speed because I have speed up the time I change this to 500 so it will work fast… Clear? So here you can see we have made four programmes hide, show, and toggle or hide/show together

Hide from help we can hide the statement if we have to hide an existing element. Show in which existing element which is hidden from the beginning has to show that. Hide and show both buttons with the help of hide we are hiding the element and help of show we are showing and last both tasks at same time from one button we used toggle, toggle this will hide and show our element display converting display none to display lock. So this our today’s segment toggles. In today’s session we saw three things. Here we have toggle’s example and this our toggle with speed which we have covered already. So today’s segment is totally related to display effects that we have covered like show effect, hide effect and third is show and hide together that is toggle effect. So effect is about show and hide but supporting to show and hide there are three methods show, hide and toggle these three have covered today’s session.

(21/39)

So guys, I request you all three methods that we have covered in today’s session in that we have used one parameter that is time, at milliseconds, we have used, so I request that you, whatever practical’s we have done, total four practical’s we  have done, for your own practice that and if you want codes of this so that is available on our description box you can take from there. So when you practice on this program then or else during the segment having any difficulties or something like that you didn’t understand so you can inform us on Forum dot Learn Vern dot com. We will revert all your questions with solutions.(discussion to be added)

In our next segment we will see Fading effects related to jQuery, how to provide fading  effects in our elements and content. Thank you.