javascript - Content Slider in JS and CSS -


Essentially, what I'm trying to accomplish is creating content slider which has a opaque yellow color division Move over images (top state) then slide down to 100px below images in a gray color (bottom state). These down states should work as slide selectors, when the position above and related image click is clicked on.

I have tried to use many materials and slideshows to do this, but none of them actually allows me to develop the effect. S3Slider is the one that has given me the most success because it becomes the state animation per slide.

Here JS :: 

  (function ($) {$ .fn.s3Slider = function (vars) {var element = this; var timeOut = (vars.timeOut ! = Undefined)? Vars.timeOut: 4000; var current = ft; var timautfon = ft; var faderStat = true; var mover = wrong; var item = $ ("#" + element [0] .id + "content. "+ Element [0] .ID +" image "); var itemspan = $ (" # "+ element [0] id +" content. "+ Element [0]. Id +" image span "); item. (Function (i) {$ (items [i]). Mouseover (function () {mover = true;}) $ (item [i]). Mouseout (function () {mOver = false; fadeElement (true); });}) Var fadeElement = function (isMouseOut) {var this timeout = (isMouse Out?) (TimeOut / 2): Time (time); this timeout = (feederstat)? 10: this time ot; if (item length = gt; 0) {timeOutFn = setTimeout (vs slider, this timeout);} Else {console.log ("Poof ..")}}} make makeSlider = function () {current = (current = null)? Current: item [(items.le ngth -1)]; var currNo = jQuery.inArray (Current, item) + 1 currNo = (currNo == items.length)? 0: (curnNo - 1); var newMargin = $ (element). Width () * currNo; If (faderStat == true) {if (! Mover) {$ (item [currNo]) FadeIn ((timeout / 6), function () (if ($ (itemsSpan [currNo]) CSS ('bottom') == 0) {$ (ItemSpane [Kareeno]) SlideUp ((timeout / 6), Function () {FaderStat = false; current = item [currNo]; if (! Mover) {fadeElement (false);}})}} and {$ (itemspane [adolescence]) slidedown ((timeout / 6), function } {FederStat = False; current = objects [not]; if (! Mover) {efedimel (;)}}})}}};}} and {if (($ (icmaspspen [kéreo]). ('Bottom') == 0) {$ (ItemSpane [Kareeno]). SlideDown ((timeout / 6), function () {$ (I M [cruel nose]. Fadeaut ((timeout / 6), function () {faderStat = true; current = items [(currNo + 1); if (! Mover) {fadeElement (false);}}}; );} And {$ (ItemSpane [Carno no]). SlideUp ((timeout / 6), function () {$ (item [not to be]). Feedout ((timeout / 6), function () {faderStat = true ; Current = items [(CurrNo + 1]], if (! Mower) {fadeElement (wrong);}}}}}}}}}} vslider ();};}) (jquery);   
 This is a very small code and I am trying to modify it to get that effect. It looks like the code calls from jquery for .slideUp and .slideDown events. I can not understand how to hide those animations for the content, rather to bring the above height to life.  
 Any help on that particular material slider solution would be great with any help would be a life saver!   
 Thank you for your time and assistance in helping you understand the world of jquery.  
  
 
 
 I think that you are looking for animate function instead of slides, like this ...  
  $ someDiv.animate ({top: '- = 200'});

Comments

Post a Comment

Popular posts from this blog

Python SQLAlchemy：AttributeError: Neither 'Column' object nor 'Comparator' object has an attribute 'schema' -

I tried to create a new database in my project, but when I run the script, I get this error, I have another project, this type of definition worked before, but now it gets a single error. I am using Python 2.7.8 and the version of SQLAlchemy module is 0.9.8. By the way, using a project flask- SQLAlchemy, it works well, I'm confused. Traceback information is as follows: Traceback (most recent call final): File "D: / Projects / IOM / db_create.py", line 4, & lt; Module & gt; From the models the base file "D: \ Projects \ OO-IM \ models.py", in line 15, in the & lt; Module & gt; Column ( 'followed_id', int (), ForeignKey ( 'user.id')) file "C: \ Python27 \ lib \ site-packages \ SQLAlchemy \ SQL \ schema.py", line 369, __new__ schema = metadata. Schema file "C: \ Python27 \ lib \ site-packages \ SQLAlchemy \ SQL \ elements.py", line 662, AttributeError in __getattr__ key): Neither 'column' object nor ...
Read more

java - How not to audit a join table and related entities using Hibernate Envers? -

I use Eners to be hibernate to audit my institutions. I have an audit entity, Foo , which includes a list & lt; Bars & gt; However, I do not want to audit the bar institutions, in the form of properties, I have written that: @inti @edicated public class Foo {@JoinTable (name = "T_FOO_BAR", joinColumns = @JoinColumn (name = "FOO_ID"), inverseJoinColumns = @JoinColumn (Name = "BAR_ID")) @ManyToMany (Cascade = Persist) @ Indited (targetAuditMode = RelationTargetAuditMode.NOT_AUDITED ) Public listing & lt; Bars & gt; GetBars () {Return bars; }} Now, I want to retrieve an amendment of foo : AuditReader reader = AuditReaderFactory.get (GetEntityManager ()); FU modification = (FU) reader.CreativeTeA () .entensEtrevision (Foo Class, 42) .getSingleResult (); Unfortunately, when I want to retrieve all the data (i.e. when it loads lazy times ), error me ORA-00942: table or view is not present , because Tried to query this: Sel...
Read more

mongodb - CakePHP paginator ignoring order, but only for certain values -

While pagging my user model in kppp, I can sort with some values, but not others. For example, I can order results from created or email , for example, but username or reputation seems to come back order by arbitrary command for example with a list of users: $ this-> paginate = array ('condition' => array ( 'User.is_active' = & gt; true), 'border' => 24, 'order' => array ('User.created' => DESC)); Works as expected, but $ this - & gt; Paged = array ('conditions' = & gt; array (' user.isIactive '= & gt; true),' border '= & gt; 24,' command '= & gt; array (' user repeats' = ' & Gt; DESC ')); No, no. I first thought that this could be a database issue, but when I search the database directly, sorted as expected. Note: I am using Mangodebi with the Mongo DB plugin of Ichikawa for the KPPHP; Pagnetizing users are used to work properl...
Read more