Animating when filtering divs
I can't quite wrap my head around how to do this, so any help would be appreciated.
I have a search field and as you type into it, it is looking at a data-attribute and hiding the divs that don't have the correct data. I would like to fade out the divs that don't have the correct data. I'd also like them to fade in as you clear out the search box. I can't quite figure out what I need to do, should I use .fadeIn/.fadeOut or should I be adding/removing classes?
This is my code for the filtering:
$("#filter").keyup(function()
var selectSize = $(this).val();
filter(selectSize);
);
function filter(e)
if(e)
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').hide().filter(function ()
return regex.test($(this).data('regions'))
).show();
else
$('.oneStaff').show();
jquery css jquery-animate
asked Nov 14 '18 at 16:21
William CunninghamWilliam Cunningham
169112
add a comment |
I can't quite wrap my head around how to do this, so any help would be appreciated.
I have a search field and as you type into it, it is looking at a data-attribute and hiding the divs that don't have the correct data. I would like to fade out the divs that don't have the correct data. I'd also like them to fade in as you clear out the search box. I can't quite figure out what I need to do, should I use .fadeIn/.fadeOut or should I be adding/removing classes?
This is my code for the filtering:
$("#filter").keyup(function()
var selectSize = $(this).val();
filter(selectSize);
);
function filter(e)
if(e)
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').hide().filter(function ()
return regex.test($(this).data('regions'))
).show();
else
$('.oneStaff').show();
jquery css jquery-animate
asked Nov 14 '18 at 16:21
William CunninghamWilliam Cunningham
169112
1
As I recallshow/hideuses thedisplayproperty which cannot be animated. FadeIn would seem to be the optimal solution.
– Paulie_D
Nov 14 '18 at 16:32
@Paulie_D thanks for the comment. It sent me in the right direction. I used fadeIn/fadeOut and it worked like a charm.
– William Cunningham
Nov 20 '18 at 13:09
add a comment |
I can't quite wrap my head around how to do this, so any help would be appreciated.
I have a search field and as you type into it, it is looking at a data-attribute and hiding the divs that don't have the correct data. I would like to fade out the divs that don't have the correct data. I'd also like them to fade in as you clear out the search box. I can't quite figure out what I need to do, should I use .fadeIn/.fadeOut or should I be adding/removing classes?
This is my code for the filtering:
$("#filter").keyup(function()
var selectSize = $(this).val();
filter(selectSize);
);
function filter(e)
if(e)
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').hide().filter(function ()
return regex.test($(this).data('regions'))
).show();
else
$('.oneStaff').show();
jquery css jquery-animate
asked Nov 14 '18 at 16:21
William CunninghamWilliam Cunningham
169112
I can't quite wrap my head around how to do this, so any help would be appreciated.
I have a search field and as you type into it, it is looking at a data-attribute and hiding the divs that don't have the correct data. I would like to fade out the divs that don't have the correct data. I'd also like them to fade in as you clear out the search box. I can't quite figure out what I need to do, should I use .fadeIn/.fadeOut or should I be adding/removing classes?
This is my code for the filtering:
$("#filter").keyup(function()
var selectSize = $(this).val();
filter(selectSize);
);
function filter(e)
if(e)
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').hide().filter(function ()
return regex.test($(this).data('regions'))
).show();
else
$('.oneStaff').show();
jquery css jquery-animate
jquery css jquery-animate
asked Nov 14 '18 at 16:21
William CunninghamWilliam Cunningham
169112
asked Nov 14 '18 at 16:21
William CunninghamWilliam Cunningham
169112
asked Nov 14 '18 at 16:21
William CunninghamWilliam Cunningham
169112
asked Nov 14 '18 at 16:21
William CunninghamWilliam Cunningham
169112
asked Nov 14 '18 at 16:21
William CunninghamWilliam Cunningham
169112
169112
1
As I recallshow/hideuses thedisplayproperty which cannot be animated. FadeIn would seem to be the optimal solution.
– Paulie_D
Nov 14 '18 at 16:32
@Paulie_D thanks for the comment. It sent me in the right direction. I used fadeIn/fadeOut and it worked like a charm.
– William Cunningham
Nov 20 '18 at 13:09
add a comment |
1
As I recallshow/hideuses thedisplayproperty which cannot be animated. FadeIn would seem to be the optimal solution.
– Paulie_D
Nov 14 '18 at 16:32
@Paulie_D thanks for the comment. It sent me in the right direction. I used fadeIn/fadeOut and it worked like a charm.
– William Cunningham
Nov 20 '18 at 13:09
1
1
As I recall
show/hide uses the display property which cannot be animated. FadeIn would seem to be the optimal solution.– Paulie_D
Nov 14 '18 at 16:32
As I recall
show/hide uses the display property which cannot be animated. FadeIn would seem to be the optimal solution.– Paulie_D
Nov 14 '18 at 16:32
@Paulie_D thanks for the comment. It sent me in the right direction. I used fadeIn/fadeOut and it worked like a charm.
– William Cunningham
Nov 20 '18 at 13:09
@Paulie_D thanks for the comment. It sent me in the right direction. I used fadeIn/fadeOut and it worked like a charm.
– William Cunningham
Nov 20 '18 at 13:09
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304623%2fanimating-when-filtering-divs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304623%2fanimating-when-filtering-divs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
As I recall
show/hideuses thedisplayproperty which cannot be animated. FadeIn would seem to be the optimal solution.– Paulie_D
Nov 14 '18 at 16:32
@Paulie_D thanks for the comment. It sent me in the right direction. I used fadeIn/fadeOut and it worked like a charm.
– William Cunningham
Nov 20 '18 at 13:09